[英]Remove an element if it contains a specific word
I have a button that adds a specific word to a <li>
in a <ul>
.我有一个按钮,可以将特定单词添加到 <
<ul>
<li>
中。 There is also a button to have a <li>
containing a specific word removed.还有一个按钮可以删除包含特定单词的
<li>
。
I really thought includes()
or match()
would work, but they aren't.我真的认为
includes()
或match()
会起作用,但事实并非如此。
Below is a simplified version of my site.以下是我网站的简化版本。 So
lastChild
or removeChild
doesn't actually work in my case, despite being the obvious answer.所以
lastChild
或removeChild
在我的情况下实际上不起作用,尽管答案很明显。 This is because the <li>
being removed may be in a random spot in the <ul>
.这是因为被删除的
<li>
可能位于<ul>
中的随机位置。
I also can't code the specific word like includes(month)
.我也无法编码特定的单词,例如
includes(month)
。 It needs to be includes(WORD_BANK[0][0])
.它需要
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>
First, you need querySelectAll
to get all li
elements, and you need to use find
method to find the li
which includes
the text.首先,您需要
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>
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>
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>
You don't really need neither includes
or match
if you are going to remove elements without any specific order.如果您要删除没有任何特定顺序的元素,则实际上不需要
includes
或match
。
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>
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>
problem with your takeOut
function in you use includes
which return boolean not an dom element so it cause error.您使用的
takeOut
函数的问题includes
返回布尔值而不是 dom 元素,因此会导致错误。
we use two way to remove childs.我们使用两种方法来删除孩子。
lastChild
key in selected element object.lastChild
键来删除最后一个孩子。WORD_BANK[0][0]
in selected elementWORD_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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.