Why queryselectorAll not working for removing element?

Question

    <ul class="items">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
    </ul>

const ul = document.querySelector('.items'); ul.remove(); This will remove the complete html. const li = document.querySelector('.item'); li.remove() will remove the first li element. const lis = document.querySelectorAll('.item'); lis.remove(); is giving error => Uncaught TypeError: ul.remove is not a function. Why it is not working with the querySelectorAll method?

`querySelectorAll` returns a `NodeList`, which does not have a `remove` function. You have to use `forEach` or a loop. — Heretic Monkey, May 21 '20 at 13:54

score 1 · Accepted Answer · answered May 21 '20 at 13:55

1

querySelectorAll returns a list, that you have to iterate through manually:

const list = document.querySelectorAll(".item")
for (const element of list) {
  element.remove()
}

answered May 21 '20 at 13:55

Christian Zerbes

66
7

Why queryselectorAll not working for removing element?

1 Answers1