0

I have a list looking like this. Can I somehow remove just 1 of the li elements with eventlistener and without changing the HTML? I can remove them all by this JS code here under, but I want to remove them in the order I click.

document.querySelector("ol").addEventListener('click', whenClick);

// function to remove rows

function whenClick(event) {
  const li = document.querySelector('.item');
  li.remove();
}
<ol>
  <li class="item">Första</li>
  <li class="item">Andra</li>
  <li class="item">Tredje</li>
  <li class="item" id="fifth">Femte</li>
  <li class="item">Sjätte</li>
</ol>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Lukas E
  • 47
  • 5
  • use `e.currentTarget` – chovy Nov 06 '22 at 16:37
  • I re-opened since this is not tagged jQuery – mplungjan Nov 06 '22 at 16:38
  • @mplungjan - Why? Again, the answers are the same, and now neither of us can add a previous version of the question (you **know** there are dozens) with DOM only. Such as [this one](https://stackoverflow.com/questions/30786154/javascript-get-clicked-element-addeventlistener). – T.J. Crowder Nov 06 '22 at 16:40
  • @mplungjan - I guess I misremembered that you can't dupehammer after reopening. – T.J. Crowder Nov 06 '22 at 16:42
  • I can still close with the slightly better dupe. My answer seems to be more suited that any of the dupes I could find. Most of them are ancient, uses jQuery or have inline event handlers – mplungjan Nov 06 '22 at 16:43

1 Answers1

-1

Just remove the target

I check if it is an LI

document.querySelector("ol").addEventListener('click', whenClick);

// function to remove rows

function whenClick(event) {
  const tgt = event.target;
  if (!tgt.matches("li")) return
  tgt.remove();
}
<ol>
  <li class="item">Första</li>
  <li class="item">Andra</li>
  <li class="item">Tredje</li>
  <li class="item" id="fifth">Femte</li>
  <li class="item">Sjätte</li>
</ol>

If you have elements inside the LI we can do this

document.querySelector("ol").addEventListener('click', whenClick);

// function to remove rows

function whenClick(event) {
  const tgt = event.target.closest("li");
  if (tgt) tgt.remove();
}
<ol>
  <li class="item"><span>Första</span></li>
  <li class="item">Andra</li>
  <li class="item">Tredje</li>
  <li class="item" id="fifth">Femte</li>
  <li class="item">Sjätte</li>
</ol>
mplungjan
  • 169,008
  • 28
  • 173
  • 236