删除Div的Javascript函数

Javascript Function to Remove Div

本文关键字：函数 Javascript Div 删除      更新时间：2023-09-26

我需要一个可以逐个删除div的函数。我的代码如下所示。在我的代码中，我创建了一个函数，当我单击按钮时创建一个div。而且我不知道如何一个一个地删除div。

请帮我用正确的代码逐个删除div 

<html>
<head>
</head>
<body>
<button id="buttonone" onclick="creatediv()">CREATE A DIV</button>
<button id="buttontwo" onlick="removedivider()">Remove DIV </button>
<script>


function creatediv()
{
document.getElementById("buttonone").innerHTML="CREATE ANOTHER DIV";    
var newdiv = document.createElement("div");
newdiv.setAttribute("id","newdiv");
var text = document.createTextNode(Math.floor(Math.random()*100)+1); 
newdiv.appendChild(text);
newdiv.style.color="white";
newdiv.style.width="100px";
newdiv.style.backgroundColor="green";
document.body.appendChild(newdiv);
}

function removedivider()
{
    //Function to Remove the DIV one by one;
}

</script>
</body>
</html>

<script>
var index = 0;
function creatediv()
{
++index;
document.getElementById("buttonone").innerHTML="CREATE ANOTHER DIV";    
var newdiv = document.createElement("span");
newdiv.setAttribute("id","newdiv" + index);
var text = document.createTextNode(Math.floor(Math.random()*100)+1); 
newdiv.appendChild(text);
newdiv.style.color="white";
newdiv.style.width="100px";
newdiv.style.backgroundColor="green";
document.body.appendChild(newdiv);
}

function removedivider()
{
    document.body.removeChild(document.getElementById("newdiv" + index));
    --index;
}
</script>

应该可以，我没有测试。

您不是很清楚应该删除哪个div。此外，在您的代码中，您重复地用相同的id附加div s。你不能那样做。

我做了一个快速的例子，删除了首先附加的div(队列)。我给每个日期一个基于当前时间的id，但这真的不是必要的。您总是可以删除父div的第一个子div，您要添加这些div s。

但是，如果您计划将这些div附加在不一定都在同一父节点下的地方，那么为它们提供唯一的id并存储这些id是有用的。

<标题>小提琴h1> 

<button id="add">add</button>
<button id="remove">remove</button>
<div id="holder">
    <p>Added divs will go here</p>
</div>
JavaScript

var ids = [];
document.getElementById("add").onclick = function () {
    var id = new Date().getTime(),    // generate unique id (sort of)
        div = document.createElement("div");  // create a div element
    ids.push(id);    // push the generated id to the holder array, ids
    div.appendChild(document.createTextNode(id));  // append a text node to the div
    div.setAttribute("class", "newDiv");    // give it a class for styling
    div.setAttribute("id", id);    // set its id
    
    document.getElementById("holder").appendChild(div); // append the div
}
document.getElementById("remove").onclick = function () {
    if (ids.length) {    // only perform if a div has been appended
        var div = document.getElementById(ids.shift());
        // ids.shift() removes and returns ids[0], or the earliest added div
        // this finds that element in the DOM
        div.parentNode.removeChild(div);    // and removes it
    } else {    // otherwise alert that there are no divs to remove
        alert("no divs to remove!");
    }
}
CSS

.newDiv {
    height: 20px;
    width: 110px;
    background-color: #7EA8CA;
    border: solid 1px #93CC76;
}

将您的代码替换为以下

<!DOCTYPE html>
<html>
<head>
<title>DIVs</title>
<script type="text/javascript">
function create_div() {
  document.getElementById("button1").innerHTML="CREATE ANOTHER DIV";    
  var div = document.createElement("DIV");
  var text = document.createTextNode(Math.floor(Math.random()*100)+1); 
  div.appendChild(text);
  div.style.color = "white";
  div.style.width = "100px";
  div.style.backgroundColor = "green";
  document.body.appendChild(div);
}
function remove_div() {
  var div = document.getElementsByTagName('DIV'), i;
  for(i = div.length-1; i >= 0; i--){
     div[i].parentNode.removeChild(div[i]);
     return false;
  }
}
</script>
</head>
<body>
    <button id="button1" onclick="create_div()">CREATE DIV</button>
    <button id="button2" onclick="remove_div()">REMOVE DIV</button>
</body>
</html>

顺便说一下，你不能有多个div具有相同的ID。检查jsBin

此函数假设没有其他div元素。它还将按fifo顺序删除div。

function removedivider() {
    var divs = document.getElementsByTagName('div');
    if (divs.length > 0) divs[0].remove();
}
编辑:

这里有一个jsfield

相关文章：