Мой Дом такой:

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

Теперь мой js такой:

const btn = document.querySelectorAll('.btn');
btn.forEach((button, i)=>{
    button.addEventListener('click', ()=>{
        const boxes = document.querySelectorAll('.child');
        boxes.splice(i, 1)
    })
})

Теперь ящики представляют собой массив, и после нажатия кнопки удаления я хочу удалить элемент pertucal из этого массива. но в нем говорится, что box.splice () не является функцией . как это решить?

0
Arijit Maiti 10 Окт 2021 в 14:58

3 ответа

Лучший ответ

splice() - это метод массива. Коллекция, возвращаемая из querySelectorAll(), похожа на массив. Используйте что-то вроде оператора распространения ..., чтобы преобразовать его в массив.

const btn = document.querySelectorAll('.btn');
btn.forEach((button, i)=>{
    button.addEventListener('click', ()=>{
        const boxes = [...document.querySelectorAll('.child')];
        boxes.splice(i, 1)
    })
})

Примечание. На самом деле это ничего не удаляет из DOM. Удаляет только его из массива, как вы указали в вопросе.

0
Tushar Shahi 10 Окт 2021 в 12:01

querySelectorAll возвращает отмеченный список, который необходимо преобразовать в массив.

const nodelist = document.querySelectorAll('div');
const nodelistToArray = Array.apply(null, nodelist);
0
Siavash Mehdizadeh 10 Окт 2021 в 12:03

Теперь ящики - это массив и ...

На самом деле boxes НЕ является массивом, как вы думаете. boxes является результатом document.querySelectorAll, который возвращает NodeList, а не массив. NodeList очень похож на массив, но не имеет всех методов Array.prototype. Чтобы использовать .splice на NodeList, вы должны преобразовать его в массив. Вот как бы вы это сделали:

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));
  });
});
0
Jacob Lockwood 10 Окт 2021 в 12:08