如果元素包含特定單詞，則刪除它

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>