RemoveChild只删除nodelist的最后一个元素，但不会删除第一个元素

Question

你好，我正在开发javaScript滑块。首先，我在init上创建3张卡，然后点击向右箭头，我正在创建接下来的3张卡和以前的卡需要被删除。所以我使用removeChild(slider. childnodes [i])，但是它只删除我添加的新卡，并留下旧卡，我也尝试了slider.removeChild(slider. childnode [i])。第一个孩子和最后一个孩子)，但它没有帮助。下面是代码

import { pets } from '/js/pets-list.js';
const arrowLeft = document.getElementById('arrow-left');
const arrowRight = document.getElementById('arrow-right');
const mobArrowLeft = document.getElementById('mobile-arrow-left');
const mobArrowRight = document.getElementById('mobile-arrow-right');
const slider = document.getElementById('slider');
let sliderPositionLeft = slider.style.left;
for (let i = 0; i < 3; i++) {
let newCardR = document.createElement('div');
newCardR.className = 'slider-content_card';
let newCardImg = document.createElement('img');
newCardImg.src = 'assets/modal-images/woody.png';
newCardImg.alt = 'slider-pet-image';
let newCardText = document.createElement('p');
newCardText.textContent = 'Woody';
let newCardButton = document.createElement('button');
newCardButton.className = 'button_secondary';
newCardButton.textContent = 'Learn more';
newCardR.appendChild(newCardImg);
newCardR.appendChild(newCardText);
newCardR.appendChild(newCardButton);
slider.appendChild(newCardR);
}
let clickCounterR = 0;
arrowRight.addEventListener('click', () => {
clickCounterR++;
console.log(slider.childNodes);
for (let j = 0; j < 3; j++) {
debugger;
let newCardR = document.createElement('div');
newCardR.className = 'slider-content_card';
let newCardImg = document.createElement('img');
newCardImg.src = 'assets/modal-images/woody.png';
newCardImg.alt = 'slider-pet-image';
let newCardText = document.createElement('p');
newCardText.textContent = 'Woody';
let newCardButton = document.createElement('button');
newCardButton.className = 'button_secondary';
newCardButton.textContent = 'Learn more';
newCardR.appendChild(newCardImg);
newCardR.appendChild(newCardText);
newCardR.appendChild(newCardButton);
slider.appendChild(newCardR);
}
if (clickCounterR === 2) {
debugger;
for (let i = 0; i < 3; i++) {
slider.removeChild(slider.firstChild);
}
clickCounterR = 0;
}
sliderPositionLeft = sliderPositionLeft - 1004;
slider.style.left = sliderPositionLeft + 'px';
});

Answer 1

使用

elementToRemove.remove();

使用element.remove()而不是parent.removeChild(element)，您不必担心在父元素上应用该方法或使用正确的索引。

Answer 2

由于您的代码是先删除新元素，您应该先尝试删除旧卡片，然后添加新卡片(因此，切换两个for循环):

arrowRight.addEventListener('click', () => {
clickCounterR++;
console.log(slider.childNodes);
if (clickCounterR === 2) {
debugger;
for (let i = 0; i < 3; i++) {
slider.removeChild(slider.firstChild);
}
clickCounterR = 0;
}
for (let j = 0; j < 3; j++) {
debugger;
let newCardR = document.createElement('div');
newCardR.className = 'slider-content_card';
let newCardImg = document.createElement('img');
newCardImg.src = 'assets/modal-images/woody.png';
newCardImg.alt = 'slider-pet-image';
let newCardText = document.createElement('p');
newCardText.textContent = 'Woody';
let newCardButton = document.createElement('button');
newCardButton.className = 'button_secondary';
newCardButton.textContent = 'Learn more';
newCardR.appendChild(newCardImg);
newCardR.appendChild(newCardText);
newCardR.appendChild(newCardButton);
slider.appendChild(newCardR);
}
sliderPositionLeft = sliderPositionLeft - 1004;
slider.style.left = sliderPositionLeft + 'px';
});