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 internet 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.

You need e.target.parentNode. The e object is the event object, not a node. It is the target property that references the node. — trincot
– trincot, Commented Oct 10, 2017 at 11:27

Tarek Kalaji · Accepted Answer · 2019-01-09 09:04:58Z

17

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>

answered Jan 9, 2019 at 9:04

Tarek Kalaji

2,25729 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Benedict Over a year ago

I have to say that I much prefer this as it works really well for dynamically created elements too. Imagine building a page that elements are dynamically added as opposed to the OP version where the elements are rendered on load, this would work best as it attaches itself to that specific element as a childnode. Gorgeous!

neicore Over a year ago

This answer is perfection! In my case, I was removing a grandparent node, so I did this.parentNode.parentNode.remove()

Arun P Johny · Accepted Answer · 2017-10-10 11:29:26Z

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>

DAG · Accepted Answer · 2020-07-10 04:24:09Z

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>

Ibrahim Shah · Accepted Answer · 2020-09-16 16:05:29Z

1

this.parentElement.remove can also work

answered Sep 16, 2020 at 16:05

Ibrahim Shah

111 bronze badge

Comments

Elias Glyptis · Accepted Answer · 2022-11-24 14:27:28Z

// 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>

Collectives™ on Stack Overflow

Remove parent element on click with plain javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related