Hay 5 elementos en una matriz (que consiste en objetos dentro) y se representa visualmente creando algunos elementos en el documento según la longitud de la matriz. Como esto:
let array = [ { "value": "Hello" }, { "value": "World" }, { "value": "You Can" }, { "value": " NOT" }, { "value": "<h1>Remove ME!</h1>" } ] // creating it visually by creating elements. for(let i = 0; i < array.length; i++) { const div = document.createElement("div"); div.classList.add("DIV"); div.innerHTML = ` <span class="Text">${array[i].value}</span> <span class="Remove">( Remove )</span> ` document.body.appendChild(div); } document.querySelectorAll(".Remove").forEach(elem => { elem.addEventListener("click", () => { remove(); }) }) function remove() { // Now how to remove the specific item from the array? } // I hope this is fully understandable. /* CSS IS NOT VERY IMPORTANT */ .DIV { padding: 10px; margin: 10px; background: purple; color: #fff; border-radius: 10px; display: flex; justify-content: space-between; } .Remove { cursor: pointer; height: fit-content; } Ahora quiero eliminar el cuarto elemento de la matriz que tiene el valor "NO" haciendo clic en el cuarto botón de eliminación, pero ¿cómo puedo hacerlo?
(Su código debería funcionar en todos los elementos). Cualquier ayuda será muy apreciada. Gracias.
En términos simples, agregue una id o algún tipo de identificador y utilícelo de esa manera.
let array = [ { "value": "Hello" }, { "value": "World" }, { "value": "You Can" }, { "value": " NOT" }, { "value": "<h1>Remove ME!</h1>" } ] // creating it visually by creating elements. for (let i = 0; i < array.length; i++) { const div = document.createElement("div"); div.classList.add("DIV"); div.innerHTML = ` <span class="Text">${array[i].value}</span> <span class="Remove" data-id="${"elem-" + i}">( Remove )</span> `; document.body.appendChild(div); } document.querySelectorAll(".Remove").forEach(elem => { elem.addEventListener("click", () => { remove(elem.dataset.id); }) }) function remove(id) { // Now how to remove the specific item from the array? console.log(id); } // I hope this is fully understandable. /* CSS IS NOT VERY IMPORTANT */ .DIV { padding: 10px; margin: 10px; background: purple; color: #fff; border-radius: 10px; display: flex; justify-content: space-between; } .Remove { cursor: pointer; height: fit-content; } El código anterior obtendrá el conjunto de datos ahora. Usando esto, elimine el elemento de esa id y vuelva a representar la vista.
let array = [ { "value": "Hello" }, { "value": "World" }, { "value": "You Can" }, { "value": " NOT" }, { "value": "<h1>Remove ME!</h1>" } ] function renderElement(array) { // creating it visually by creating elements. for (let i = 0; i < array.length; i++) { const div = document.createElement("div"); div.classList.add("DIV"); div.innerHTML = ` <span class="Text">${array[i].value}</span> <span class="Remove" data-id="${"elem-" + i}">( Remove )</span> `; document.body.appendChild(div); } document.querySelectorAll(".Remove").forEach(elem => { elem.addEventListener("click", () => { remove(elem.dataset.id); }) }); } renderElement(array); function remove(id) { // Now how to remove the specific item from the array? // Remove the `elem-` from id. array.splice(+id.replace("elem-", ""), 1); document.querySelectorAll("body > .DIV").forEach(elem => { elem.remove(); }); renderElement(array); } // I hope this is fully understandable. /* CSS IS NOT VERY IMPORTANT */ .DIV { padding: 10px; margin: 10px; background: purple; color: #fff; border-radius: 10px; display: flex; justify-content: space-between; } .Remove { cursor: pointer; height: fit-content; }