Remove parent element on click with plain javascript

Question

I am trying to learn stuff I was used to do in jQuery do in plain JavaScript.

I have example I found on the inte.net to solve and it really gave me hard time.

I am trying to remove parent div.single on click on button.remove .

Here is the code;

 var btn = document.getElementsByClassName('remove') for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click',function (e) { e.parentNode.parentNode.removeChild(e.parentNode); }, false); }

 <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X1</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X2</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X3</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X4</button> </div>

I am getting error e.parentNode is undefined .

Here is the jQuery code which does the same I am after.

$(document).ready(function() {  
  $(document).on('click', '.remove', function () {    
    $(this).parent('.single').remove()
  })
})

Thanks for any answers.

Answer 1

To remove parent node as short way:

 <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" onclick="return this.parentNode.remove();" class="remove">X</button> </div>

Answer 2

You need to get the element reference from the event object( currentTarget / target )

Note: All the modern browser's have support for Node.remove()

 var btn = document.getElementsByClassName('remove') for (var i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function(e) { e.currentTarget.parentNode.remove(); //this.closest('.single').remove() // in modern browsers in complex dom structure //this.parentNode.remove(); //this refers to the current target element //e.target.parentNode.parentNode.removeChild(e.target.parentNode); }, false); }

 <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X1</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X2</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X3</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X4</button> </div>

Answer 3

If you are using ES6 and above , you could avoid having to use the currentTarget for the click event:

 const removeButtons = document.getElementsByClassName('remove'); Array.from(removeButtons).forEach((removeButton) => { removeButton.addEventListener('click', () => { removeButton.parentNode.remove(); }); });

 <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X1</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X2</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X3</button> </div> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X4</button> </div>

Answer 4

this.parentElement.remove 也可以工作

Answer 5

 // Node List of the buttons in your html with class of "remove" const removeButtonsNodeList = document.querySelectorAll(".remove"); // No Need to convert node list to an array, you can use use forEach to loop over a nodeList. Just beware it's not an array // Loop through the list and add an event listener, on click to run a function on each btn (button) in the array. The function removes the parent. But you can inspect the element of your html and you can play with in console if your html chnages to find the correct parent, you may have to get the parent of prarent of parent. removeButtonsNodeList.forEach((btn) => { btn.addEventListener('click', function(){ btn.parentElement.remove(); }); })

 <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X1 - Delete Me</button> </div> <br> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X2 - Delete Me</button> </div> <br> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X3 - Delete Me</button> </div> <br> <div class="single"> <img src="http://via.placeholder.com/150x150"> <button type="button" class="remove">X4 - Delete Me</button> </div>