CODEWITHSUNDEEP
javascripthtml
Deke
Deke

Reputation: 4649

How to delete the respective li tag along with the button?

I'm trying to create a list of input tags along with delete button next to it. When I click on delete button, the input tag next to it should also get deleted. Here only the button gets deleted but not the respective li. How do I go about this?

  var buttonItems = document.querySelectorAll(".deleteButton");
  var listItems = document.getElementsByTagName("li");

  for (var i = 0; i < buttonItems.length; i++) {
    for (var i = 0; i < listItems.length; i++) {

        buttonItems[i].addEventListener('click',function(e){
        this.remove(this)
        listItems[this].remove()
      })

    }
  }

Upvotes: 0

Views: 130

Answers (2)

Ronnie Smith
Ronnie Smith

Reputation: 18555

Use items parent to .removeChild.

var deleteButtons = document.querySelectorAll(".delete-button");
var grandparent;

for (var i = 0; i < deleteButtons.length; i++) {
    deleteButtons[i].addEventListener('click',function(e){
        grandparent = e.target.parentElement.parentElement;
        grandparent.removeChild(e.target.parentElement);
    });
}
<ul>
<li>
Test Test 1<button class="delete-button">Delete</button>
</li>
<li>
Test Test 2<button class="delete-button">Delete</button>
</li>
<li>
Test Test 3<button class="delete-button">Delete</button>
</li>
<li>
Test Test 4<button class="delete-button">Delete</button>
</li>
<li>
Test Test 5<button class="delete-button">Delete</button>
</li>


</ul>

Upvotes: 1

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

You get parentNode, which Element inherits from Node:

In ES5

document.querySelectorAll(".deleteButton").forEach(function(btn) {
  //Add listener for click event on delete button
  btn.addEventListener('click', function(e) {
    //it will always return the li tag
    //beucase lit tag is parent of button..
    e.target.parentNode.remove();
  });
});
<ul>
  <li>Coffee<button class="deleteButton">Delete</button></li>
  <li>Tea <button class="deleteButton">Delete</button></li>
  <li>Milk <button class="deleteButton">Delete</button></li>
</ul>

In ES6

document.querySelectorAll(".deleteButton").forEach(btn => {
    //Add listener for click event on delete button
    btn.addEventListener('click', e => e.target.parentNode.remove());
});
<ul>
  <li>Coffee<button class="deleteButton">Delete</button></li>
  <li>Tea <button class="deleteButton">Delete</button></li>
  <li>Milk <button class="deleteButton">Delete</button></li>
</ul>

References:

  • DOM2 Core specification - well-supported by all major browsers
  • DOM2 HTML specification - bindings between the DOM and HTML
  • DOM3 Core specification - some updates, not all supported by all major browsers
  • HTML5 specification - which now has the DOM/HTML bindings in it

Upvotes: 1

Related Questions