Remove an element if it contains a specific word

Question

I have a button that adds a specific word to a <li> in a <ul> . There is also a button to have a <li> containing a specific word removed.

I really thought includes() or match() would work, but they aren't.

Below is a simplified version of my site. So lastChild or removeChild doesn't actually work in my case, despite being the obvious answer. This is because the <li> being removed may be in a random spot in the <ul> .

I also can't code the specific word like includes(month) . It needs to be includes(WORD_BANK[0][0]) .

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; function addTo() { document.getElementById("list").innerHTML += `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; counter++; } function takeOut() { document.querySelector("li").innerHTML.includes(WORD_BANK[0][0]).remove(); }

 <ul id="list"></ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button>

Answer 1

First, you need querySelectAll to get all li elements, and you need to use find method to find the li which includes the text.

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; function addTo() { if (counter >= 3) { console.log('All array has been added'); return }; document.getElementById("list").innerHTML += `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; counter++; } function takeOut() { const element = [...document.querySelectorAll("li")].find(li => li.textContent.includes(WORD_BANK[counter - 1][0])) if (element) { element.remove() --counter; } else { console.log('element not exist') } }

 <ul id="list"></ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button>

Answer 2

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; function addTo() { document.getElementById("list").innerHTML += `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; counter++; } function takeOut() { const ele = document.querySelectorAll("li"); if (ele.length > 0) { ele[counter - 1].remove(); counter--; } }

 <ul id="list"></ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button>

Answer 3

If you really want to do with includes then:

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; function addTo() { if (counter > WORD_BANK.length - 1) return; // check document.getElementById( "list" ).innerHTML += `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; counter++; } function takeOut() { if (counter < 1) return; // check --counter; Array.from(document.querySelectorAll("li")) .find((e) => e.innerHTML.includes(WORD_BANK[counter][0])) .remove(); }

 <ul id="list"></ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button>

Answer 4

You don't really need neither includes or match if you are going to remove elements without any specific order.

Here's an error free version of your desired outcome I guess:

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"], ]; let counter = 0; function addTo() { const list = document.getElementById("list"); if (counter < WORD_BANK.length) { const liMock = `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; list.innerHTML += liMock; counter++; } } function takeOut() { const li = document.querySelector("li"); if (li) { li.remove(); counter--; } }

 <ul id="list"></ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button>

Answer 5

Try this one.

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; function addTo() { counter = counter % WORD_BANK.length; // for avoiding index out of range error const node = document.createElement("li"); const textnode = document.createTextNode(`${WORD_BANK[counter][1]} - ${WORD_BANK[counter][0]}`); node.appendChild(textnode); document.getElementById("list").appendChild(node); counter = counter % WORD_BANK.length + 1; } function takeOut() { const list = document.getElementById("list"); if (list.hasChildNodes()) { for (let [key, value] of Object.entries(list.children)) { if(value.textContent.includes(WORD_BANK[0][0])) { list.removeChild(list.children[key]); } } } }

 <ul id="list"></ul> <button id="add" onclick="addTo();">ADD</button> <button id="remove" onclick="takeOut();">REMOVE</button>

Answer 6

problem with your takeOut function in you use includes which return boolean not an dom element so it cause error.
we use two way to remove childs.

1. if you want to remove last child by accessing lastChild key in selected element object.
2. by check innerText value against your WORD_BANK[0][0] in selected element

 const WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; function addTo() { if (counter < 3) { document.getElementById("list").innerHTML += `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; counter++; } } function takeOut() { // if want to remove last child li // if (counter > 0 && counter <= 3) { // document.getElementById("list").lastChild.remove(); // counter--; // } // if you want to remove by innerText key of li const dj = document.getElementById("list")?.children; Object.keys(dj).forEach(e => { if(dj[e]?.innerText?.includes(WORD_BANK[0][0])) { dj[e].remove(); counter--; } }) }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul id="list"></ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button> </body> </html>

Answer 7

Try this,

 let WORD_BANK = [ ["day", "1"], ["month", "2"], ["year", "3"] ]; let counter = 0; let listData function addTo() { document.getElementById("list").innerHTML += `<li>${WORD_BANK[counter][0]}<br>${WORD_BANK[counter][1]}</li>`; counter++; } function takeOut() { const list = document.getElementById("list") list.removeChild(list.firstElementChild); }

 <ul id="list"> </ul> <button id="add" onclick="addTo()">ADD</button> <button id="remove" onclick="takeOut()">REMOVE</button>