Tengo un botón que agrega una palabra específica a un <li> en un <ul> . También hay un botón para eliminar un <li> que contenga una palabra específica.
Realmente pensé que includes() o match() funcionarían, pero no lo son.
A continuación se muestra una versión simplificada de mi sitio. Así que lastChild o removeChild en realidad no funcionan en mi caso, a pesar de ser la respuesta obvia. Esto se debe a que el <li> que se está eliminando puede estar en un lugar aleatorio en el <ul> .
Tampoco puedo codificar la palabra específica como includes(month) . Debe incluirse 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>Primero, necesita querySelectAll para obtener todos los elementos li , y necesita usar el método de find para encontrar el li que includes el texto.
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>Si realmente quieres hacer con include, entonces:
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>