时间戳

首页 > 解决方案 > 从父节点中删除子节点

javascript - 从父节点中删除子节点

问题描述

1 - 我正在使用 JS 添加 Div 容器，但是一旦它们的计数器越过“5”，我想从 [0] 索引中逐个删除这些Div容器。

2 - 下面是我到目前为止所做的。我什至得到了 childNodes 的编号，但我无法删除这些节点。

var counter = 0;

function add_div() {
  var mainDiv = document.getElementById("main-div");

  var divi = document.createElement("DIV");
  divi.setAttribute("ID", "div_id");
  divi.style.backgroundColor = "red";
  divi.style.height = "50px";
  divi.style.width = "50px";
  divi.style.margin = "20px";
  mainDiv.appendChild(divi);
  document.body.appendChild(mainDiv);
  document.body.style.backgroundColor = "blue";
  counter += 1;
  document.getElementById("count").innerHTML = counter;

  //read nodes
  var ch = document.getElementById("main-div").childElementCount;
  document.getElementById("demo").innerHTML = "number of childNodes: " + ch;

  //counter check
  if (counter > 5) {
    mainDiv.removeChild(mainDiv.childNodes[0]);
    // mainDiv.parentNode.removeChild(mainDiv);
  }
}
<button onclick="add_div()">ADD DIV</button>
<div id="count"></div>
<div id="demo"></div>
<div id="main-div"></div>

在此处输入图像描述

标签： javascripthtmlnodes

解决方案

我首先减少了您的计数器以更新负值和正值。然后我设置一个标志来检测你的代码是否递减。当计数器达到 5 时，减量设置为true，而当计数器向 5 移动时，减量设置为false。

然后你的 div 被添加到一个数组中，我们使用 afor loop遍历数组，一个一个地删除一个 div，直到我们到达 0，其中 decrement 设置回 false；

var counter = 0;

 let decrement = false;
function add_div() {
  if(!decrement){
    var mainDiv = document.getElementById("main-div");

  var divi = document.createElement("DIV");
  divi.setAttribute("ID", "div_id");
  divi.style.backgroundColor = "red";
  divi.style.height = "50px";
  divi.style.width = "50px";
  divi.style.margin = "20px";
  mainDiv.appendChild(divi);
  document.body.appendChild(mainDiv);
  document.body.style.backgroundColor = "blue";
  counter ++;
  document.getElementById("count").innerHTML = counter;


 
  }
  
  //counter check
  if (counter > 5) {
    decrement = true;
  }
  if(counter <= 0){
      decrement = false;
    }
  if(decrement){
    counter--; //decrement counter
    let holder = [];                                     //place div ID's in array
    document.getElementById("count").innerHTML = counter; //update counter
    let div = document.querySelector('#div_id');           //grab div
    holder.push(div);                                        //push to array
    for(let i = 0; i < 5; i++){
     holder[i].parentNode.removeChild(holder[i]) //removes child
    }
   
  }
  
}
<button onclick="add_div()">ADD DIV</button>
<div id="count"></div>
<div id="demo"></div>
<div id="main-div"></div>

推荐阅读