如果元素包含特定单词，则删除它

Question

我有一个按钮，可以将特定单词添加到 < <ul> <li>中。 还有一个按钮可以删除包含特定单词的<li> 。

我真的认为includes()或match()会起作用，但事实并非如此。

以下是我网站的简化版本。 所以lastChild或removeChild在我的情况下实际上不起作用，尽管答案很明显。 这是因为被删除的<li>可能位于<ul>中的随机位置。

我也无法编码特定的单词，例如includes(month) 。 它需要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

首先，您需要querySelectAll来获取所有li元素，并且您需要使用find方法找到includes文本的li 。

 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

如果您真的想使用包含，那么：

 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

如果您要删除没有任何特定顺序的元素，则实际上不需要includes或match 。

我猜这是您想要的结果的无错误版本：

 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

试试这个。

 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

您使用的takeOut函数的问题includes返回布尔值而不是 dom 元素，因此会导致错误。
我们使用两种方法来删除孩子。

1. 如果您想通过访问所选元素对象中的lastChild键来删除最后一个孩子。
2. 通过检查所选元素中的WORD_BANK[0][0]的 innerText 值

 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

尝试这个，

 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>