Mi Dom es así:
<div class="child"> child1 <button class="btn">Delete</button> </div> <div class="child"> child2 <button class="btn">Delete</button> </div> <div class="child"> child3 <button class="btn">Delete</button> </div> <div class="child"> child4 <button class="btn">Delete</button> </div>Ahora mi js así:
const btn = document.querySelectorAll('.btn'); btn.forEach((button, i) => { button.addEventListener('click', () => { const boxes = document.querySelectorAll('.child'); boxes.splice(i, 1); }); });Ahora las cajas son una matriz y después de hacer clic en el botón Eliminar, quiero eliminar el elemento pertucal de esa matriz. pero arroja el siguiente error:
boxes.splice() is not a function¿Como puedo resolver esto?
splice() es un método de matriz. La colección devuelta por querySelectorAll() es similar a una matriz. Use algo como ... operador de propagación para convertirlo en una matriz.
const btn = document.querySelectorAll('.btn'); btn.forEach((button, i)=>{ button.addEventListener('click', ()=>{ const boxes = [...document.querySelectorAll('.child')]; boxes.splice(i, 1) }) })Nota: Esto en realidad no elimina nada del DOM. Solo lo elimina de la matriz como lo ha indicado en la pregunta.
El querySelectorAll devuelve una lista noed. Tienes que convertirla en una matriz.
const nodelist = document.querySelectorAll('div'); const nodelistToArray = Array.apply(null, nodelist);Ahora boxes es una matriz y...
En realidad, las boxes NO son una matriz, como crees. boxes es el resultado de document.querySelectorAll , que devuelve una NodeList , no una matriz. Una NodeList es muy similar a una matriz, pero no tiene todos los métodos de Array.prototype . Para usar .splice en un NodeList , debe convertirlo en una matriz. Así es como lo harías:
const btn = document.querySelectorAll('.btn'); btn.forEach((button, i) => { button.addEventListener('click', () => { const boxes = Array.from(document.querySelectorAll('.child')); console.log(boxes.splice(i, 1)); }); });