TransWikia.com

Remove using a button

Stack Overflow Asked by Gastón on November 20, 2021

I’m having a hard time solving this problem where I need to remove an entire <li> using a button inside that <li>.

In my first attempt, I did it by clicking on the <li> so it could remove itself but it didn’t work while clicking on the button.

Then I tried to use the addEventListener on the button but I’ve only managed to remove the button itself and not the entire <li>

In my second attempt I added
childNodes[1]. to the lidos[i]

Can you please help me and also explain to me how did you do it?

// Here's my first attempt:

var lidos = document.getElementsByTagName("li");
var eliminar = document.getElementById("eliminar")

function borrado() {
  return this.parentNode.removeChild(this);
}
for (var i = 0; i < lidos.length; i++) {
  lidos[i].addEventListener("click", borrado);
}
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
  <li class="bold red" random="23">Notebook <input class="eliminar" type="button"></li>
  <li>Jello <input class="eliminar" type="button"></li>
  <li>Spinach <input class="eliminar" type="button"></li>
  <li>Rice <input class="eliminar" type="button"></li>
  <li>Birthday Cake <input class="eliminar" type="button"></li>
  <li>Candles <input class="eliminar" type="button"></li>
</ul>
domjavascript

2 Answers

Use getElementsByClassName to get array of elements(HTMLCollection), then you will need to apply the event listener to each element individually and remove the respective parent like this:

var els = document.getElementsByClassName('eliminar');

for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', function () {
        this.parentNode.remove();
    });
}
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id="list">
    <li class="bold red" random="23">Notebook <input class="eliminar" type="button"></li>
    <li>Jello <input class="eliminar" type="button"></li>
    <li>Spinach <input class="eliminar" type="button"></li>
    <li>Rice <input class="eliminar" type="button"></li>
    <li>Birthday Cake <input class="eliminar" type="button"></li>
    <li>Candles <input class="eliminar" type="button"></li>
</ul>

The above code won't work on added elements, So I've edited my code a bit which will work on added elements as well.

/* Enter Button's event */
var list = document.getElementById("list");

var add = document.getElementById('enter');

add.addEventListener('click', function () {

    var itemsByTagName = document.getElementsByTagName("li");

    var val = document.getElementById("userinput").value;

    list.innerHTML += '<li>' + val + ' <input class="eliminar" type="button"></li>';
});

/* Enter Button's event */

// Get the element, add a click listener...
document.getElementById("list").addEventListener("click", function (e) {
    // e.target is the clicked element!
    // If it is an input element of having class eliminar
    if (e.target && e.target.matches("input.eliminar")) {
        e.target.parentNode.remove();
    }
});
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id="list">
    <li class="bold red" random="23">Notebook <input class="eliminar" type="button"></li>
    <li>Jello <input class="eliminar" type="button"></li>
    <li>Spinach <input class="eliminar" type="button"></li>
    <li>Rice <input class="eliminar" type="button"></li>
    <li>Birthday Cake <input class="eliminar" type="button"></li>
    <li>Candles <input class="eliminar" type="button"></li>
</ul>

Answered by Shahnawaz Hossan on November 20, 2021

Delegate and navigate

I use the event.target of the click and remove the closest LI

Added benefit, the click works even when new LIs are added later

Note I gave the UL an ID

window.addEventListener("load",function() { // page load
  document.getElementById("list").addEventListener("click",function(e) { // e = event
    const tgt = e.target; // the thing that was clicked in the UL
    if (tgt.classList.contains("eliminar")) { // if that thing has a class eliminar
      tgt.closest("li").remove(); // remove the closest LI to the tgt
    }
  })
})  
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id="list">
  <li class="bold red" random="23">Notebook <input class="eliminar" type="button"></li>
  <li>Jello <input class="eliminar" type="button"></li>
  <li>Spinach <input class="eliminar" type="button"></li>
  <li>Rice <input class="eliminar" type="button"></li>
  <li>Birthday Cake <input class="eliminar" type="button"></li>
  <li>Candles <input class="eliminar" type="button"></li>
</ul>

Answered by mplungjan on November 20, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP