Question 219182 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

5

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
    let button = document.getElementById('button-submit');

button.onclick = button.parentElement.remove;
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search