How to remove an element that triggered a function inside a function

Question

i don't want to use this method because if there's multiple elements with same id they will all be removed i need a method to only delete the parent element of the button that was clicked. Because if you execute this code and click the button it will delete all elements with the id of "div-list" but i only want it to delete the parent element of only the button that clicked it

let button = document.getElementById('button-submit');
let div = document.getElementById('div-list');
div.appendChild(button);
button.onclick = () => {
    div.remove();
}

i found a way that works but i want another one that is only javascript here's the method that works but i hope there's another way to do it:

<div>
<button onclick="this.parentElement.remove()"></button>
<div>

Answer 1

All DOM elements in javascript have the .parentElement property. This means that in the button.onClick function you can simply say: button.parentElement.remove(); Thus removing only the parent.

Answer 2

There shouldn't be multiple html-tags with the same id (as described here for example). You could use this:

let button = document.getElementById('button-submit');

button.onclick = button.parentElement.remove;

If you want to assign the function to more than one button, consider using classnames instead of an id. The removed element will still only be the parent element of the clicked button.

Note that there is more than one way to achieve what you want and each way has pros and cons as seen in other existing answers.

Answer 3

An event listener receives an event as the first argument. That event has currentTarget as a property, which points to the element to which the event handler is attached (in your case the button).

And for that element you can use the parentElement:

function removeParent(event) {
  event.currentTarget.parentElement.remove();
}

document.querySelector('#btn1').onclick = removeParent
document.querySelector('#btn2').onclick = removeParent

<div>
<button id="btn1"></button>
</div>

<div>
<button id="btn2"></button>
<div>

As a note: You should not use the on... properties to attach events, instead use addEventListener:

function removeParent(event) {
  event.currentTarget.parentElement.remove();
}

document.querySelector('#btn1').addEventListener('click', removeParent)
document.querySelector('#btn2').addEventListener('click', removeParent)

<div>
<button id="btn1"></button>
</div>

<div>
<button id="btn2"></button>
<div>

With the on... properties, you can only attach one event handler of a particular event to an element, which can result in hard-to-debug problems in a larger code base when you accidentally overwrite an event handler that still should exist on the element.

Answer 4

Using ID's is not really ideal.

When you have multiple Elements you want to do the same too, it's usually better to use something called delegated events.

This works by adding your click handler onto a parent element .items and then checking the target to see if it's the element your after .remove , you can then find the parent .item of this element and remove.

A bonus to this approach is if you later dynamically add items, the events will work for them also. Also notice in the example below I've used closest, the advantage to parentElement is that it will continue to work if you alter the layout later.

Below is a simple example..

document.querySelector('.items')
  .addEventListener('click', e => {
     if(e.target.classList.contains('remove')) {
       e.target.closest('.item').remove();
     }
  });

<div class="items">

  <div class="item">
    Item 1
    <button class="remove">Remove</button>
  </div>

  <div class="item">
    Item 2
    <button class="remove">Remove</button>
  </div>

  <div class="item">
    Item 3
    <button class="remove">Remove</button>
  </div>

  <div class="item">
    Item 4
    <button class="remove">Remove</button>
  </div>

</div>

Answer 5

First, let's test your theory

for (let item of document.getElementById("foo").querySelectorAll("input")) item.addEventListener("click", function() {
    this.parentNode.remove();
});

<div id="foo"><input type="button" value="first button"></div>
<div id="foo"><input type="button" value="second button"></div>

As we can see, an event is attached to the very first input inside the element of the given id and its parent will be removed. Which brings us to a very important point to make:

Duplication of ids is invalid in HTML and should be avoided whenever possible

So, convert your button-submit and div-list ids to classes and do the following:

for (let button of document.getElementsByClassName("button-submit")) {
    button.addEventListener("click", function() {
        button.parentNode.remove();
    });
}

I ignored adding your buttons into your divs for now, because you have given us no contextual information about the structure that you have.