Remove specific list item from DOM using Javascript

Question

I have the following unordered list in my DOM. I am currently searching for a method, that can delete a specific list item using Javascript.

<ul class="list">
  <li id="1">Depy</li>
  <li id="2">HI</li>
  <li id="3">WA</li>
  <li id="4">FA</li>
</ul>

I am creating a function in JS, which accepts a string argument. For example "FA" and then it is supposed to delete find and delete list items containing string in their content.

To Sum up I want to delete by specific list element by if it has a matched string in content.

Jack Bashford · Accepted Answer · 2020-06-10 23:30:33Z

2

Make an array of li elements, then iterate through them and delete the item with the correct content:

function removeListItemByText(text) {
  const li = [...document.querySelectorAll("li")];
  li.forEach(elem => {
    if (elem.innerText == text) elem.parentNode.removeChild(elem);
  });
}

document.getElementById("button").onclick = function() {
  removeListItemByText("FA");
};

<ul class="list">
  <li id="1">Depy</li>
  <li id="2">HI</li>
  <li id="3">WA</li>
  <li id="4">FA</li>
</ul>

<button id="button">Remove FA</button>

edited Jun 10, 2020 at 23:30

answered Jun 10, 2020 at 23:14

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Learner33 Over a year ago

Thanks @Jack Bashford in my case it was innerText not innerHTML but appreciate it ;)

Jack Bashford Over a year ago

No worries @Learner33 - fixed answer too ;)

clayRay Over a year ago

@JackBashford why is this part in square brackets with dots at the beginning? [...document.querySelectorAll("li")]; Surely document.querySelectorAll('li"); will work just as it is?

Jack Bashford Over a year ago

document.querySelectorAll('li') returns a NodeList - the [...] is spread notation and converts it into an array so I can use forEach.

Collectives™ on Stack Overflow

Remove specific list item from DOM using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related