How can I remove the clicked "li" Element with eventlistener?

November 6, 2022

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>

>Solution :

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>