CODEWITHSUNDEEP
javascripthtmlcss
Velugoti Venkateswarlu
Velugoti Venkateswarlu

Reputation: 213

How to delete text box along with button in JavaScript

I have a button when user clicks the button it create the text box along with remove button but all the text boxes created with same id how we can delete the text box when clicks respective remove button

here My Code:

<body>
<button  type="button" id="URLbtn" onclick="Createinput()"> + Add URL</button>
<div id="TextAreaBtn"></div>

<script>
function Createinput() {
  var newdiv=document.createElement("div");
     newdiv.id="test"
  var Inputele=document.createElement("input");
  Inputele.type="text";
  Inputele.id="URLtxt"
newdiv.appendChild(btnele);
var btnele=document.createElement("button");
        btnele.id="rmvbtn"
        btnele.type="button"
        btnele.innerHTML="-"
        btnele.onclick=RemoveUrlBox()
newdiv.appendChild(btnele);
var element = document.getElementById("TextAreaBtn");
  element.appendChild(newdiv);
}
function RemoveUrlBox() {}
</script>
</body>

i am getting following outputenter image description here

if user click 2 remove button only remove the second textbox and button

Upvotes: 1

Views: 3179

Answers (3)

Carsten Massmann
Carsten Massmann

Reputation: 28236

This should do the trick:

const txtarea=document.getElementById('TextAreaBtn');
document.getElementById('URLbtn').onclick=()=>txtarea.innerHTML+=
   '<div><input type="text" class="URLtxt"><button class="rmvbtn">-</button></div>';
  
txtarea.onclick=ev=>ev.target.className==="rmvbtn"&&ev.target.parentNode.remove()
<button  type="button" id="URLbtn"> + Add URL</button>
<div id="TextAreaBtn"></div>

I replaced your id attributes with class attributes, as these don't need to be unique.

I reduced your script by using innerHTML instead of laboriously putting elements together with createElement(). This is a matter of opinion as both methods have their advantages.

I also used delegated event listener attachment for the removal buttons. This way you can get away with a single event listener on div.TextAreaBtn. The attached funcion will only trigger any action if the clicked element has class "rmvbtn".

Upvotes: 1

James
James

Reputation: 22246

Change

btnele.onclick=RemoveUrlBox()

to

  btnele.addEventListener('click', function (e) {
    // `this` is the button that was clicked no matter about the id
    // `this.parentNode` is the div you want to remove
    const nodeToRemove = this.parentNode;
    nodeToRemove.parentNode.removeChild(nodeToRemove);
  });

Upvotes: 1

epascarello
epascarello

Reputation: 207557

You need to select the wrapping div. Easiest way is to use remove() and use closest. No need to use the id..... You also need to remember ids need to be unique.

function createInput() {
  var newDiv = document.createElement("div");
  newDiv.className = 'group';

  var inputElem = document.createElement("input");
  inputElem.type = "text";
  newDiv.appendChild(inputElem);
  
  var btnElem = document.createElement("button");
  btnElem.type = "button";
  btnElem.textContent = "-";
  btnElem.addEventListener("click", removeUrlBox);
  newDiv.appendChild(btnElem);
  
  var element = document.getElementById("TextAreaBtn");
  element.appendChild(newDiv);
}

function removeUrlBox() {
  this.closest('.group').remove();
}
<button type="button" id="URLbtn" onclick="createInput()"> + Add URL</button>
<div id="TextAreaBtn"></div>

Upvotes: 2

Related Questions