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>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>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>