為什么在使用JavaScript洗掉其中一個div元素后沒有重新索引？

每次單擊帶有 class 的元素之一時，div我想洗掉 a 。index == 0.slide

它第一次作業，但是當我再次嘗試時，代碼會嘗試洗掉之前已洗掉的元素，但我仍然可以將元素記錄到控制臺。

我以為索引“0”會分配給下一個div共享同一個班級，所以下次我點擊時，這個下一個div會被洗掉。

我在這里想念什么？

這是我的代碼：

    let slides = document.querySelectorAll(".slide")
     
    slides.forEach((el) => {
        el.addEventListener("click", () => {
            // remove the first div 
            slides[0].remove() 

            // the element above has been removed, but I still can log it out (?)
            // and it seems to keep the index [0]       
            console.log(slides[0])
        })
    })

uj5u.com熱心網友回復：

這將完全符合您的期望 - 并且只會從回傳的直播 HTMLCollection中獲得getElementsByClassName：

let slides = document.getElementsByClassName("slide")

for (const slide of slides) {
  slide.addEventListener("click", () => {
    // remove the first div 
    slides[0].remove()
    console.log(slides[0])
  })
}

<div class="slide">0</div>
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>

uj5u.com熱心網友回復：

我相信您已經從 DOM 中洗掉了該元素，但還沒有從陣列中洗掉它。嘗試使用shift陣列方法洗掉要洗掉的第一個元素。

slides.forEach((el)=>{
    el.addEventListener("click",()=>{
        slides.shift().remove();
    })
}

uj5u.com熱心網友回復：

根據您的反饋和我所做的研究（關于實時和靜態節點串列），我想出了以下解決方案來解決我的問題。如您所見，我不再使用 querySelection 節點串列，因為這種型別是靜態的。相反，我選擇了一個 getElementsByClassName HTML 集合。你覺得這怎么樣？感謝您的寶貴支持！

let sliderCollection = document.getElementsByClassName("slider") // HTML COLLECTION

let arrayCollection =[] 
arrayCollection = Array.from(sliderCollection) // HTML COLLECTION turned into an array
console.log("initial number of divs:",arrayCollection.length) // initial number of divs

arrayCollection.forEach( (el)=>{
    el.addEventListener('click',()=>{
   sliderCollection[0].remove() // remove always the first element
   arrayCollection = Array.from(sliderCollection) // refill the array with the updated number of divs
   console.log(arrayCollection.length) // keep track of the current number of divs
    })
})

.container {
    display: flex;
    flex-direction: row;
  }
  
  .slider {
    height: 100px;
    width: 100px;
    background-color: red;
    border: solid 2px black;
    font-size: 3em;
  }

<div class="container">
            <div class="slider">0</div>
            <div class="slider">1</div>
            <div class="slider">2</div>
            <div class="slider">3</div>
            <div class="slider">4</div>
            <div class="slider">5</div>
          </div>

uj5u.com熱心網友回復：

在閱讀了您的問題和評論后，我認為這就是您想要做的。

div通過單擊按鈕添加一個新的并通過單擊add洗掉一個。divdiv

新的數字div將始終是陣列的當前長度divs。

let slides = document.getElementsByClassName("slide")
let container = document.querySelector(".container");
let addButton = document.querySelector("button");

[0,1,2,3,4].forEach((el) => { 
  const newDiv = createNewDiv(el);
  container.append(newDiv);
});

addButton.addEventListener("click", () => {
  const newDiv = createNewDiv(slides.length);
  container.append(newDiv);
  console.log("length of slides:", slides.length);
});

function removeDiv(e) {
  e.target.remove();
  console.log("length of slides:", slides.length);
}

function createNewDiv(slideId) {
  const newDiv = document.createElement("div");
  newDiv.classList.add("slide");
  const newContent = document.createTextNode(slideId);
  newDiv.appendChild(newContent);
  newDiv.addEventListener("click", removeDiv);
  return newDiv;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.slide {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 2px black;
  font-size: 3em;
}

<button>Add a slide</button>
<div class="container">
</div>

標籤：javascriptdom删除孩子

上一篇：為什么在瀏覽器控制臺中使用JavaScript調整此輸入字??段值的行為與手動插入值不同？

下一篇：瀏覽器究竟何時重繪和重排？