删除Div的Javascript函数_Javascript_Html

删除Div的Javascript函数

javascript html

删除Div的Javascript函数,javascript,html,Javascript,Html,我需要一个函数，可以删除一个一个div。我的代码如下所示。在我的代码中，我创建了一个函数，在单击按钮时创建一个div。我不知道如何逐个删除div 请帮我用正确的代码逐个删除div <html> <head> </head> <body> <button id="buttonone" onclick="creatediv()">CREATE A DIV</button> <button id="buttontwo"

我需要一个函数，可以删除一个一个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>


创建一个DIV
删除DIV
函数creatediv（）
{
document.getElementById（“buttonone”）.innerHTML=“创建另一个DIV”；
var newdiv=document.createElement（“div”）；
setAttribute（“id”、“newdiv”）；
var text=document.createTextNode（Math.floor（Math.random（）*100）+1）；
newdiv.appendChild（文本）；
newdiv.style.color=“白色”；
newdiv.style.width=“100px”；
newdiv.style.backgroundColor=“绿色”；
文件.body.appendChild（newdiv）；
}
函数removedivider（）
{
//功能，逐个删除DIV；
}


var指数=0；
函数creatediv（）
{
++指数；
document.getElementById（“buttonone”）.innerHTML=“创建另一个DIV”；
var newdiv=document.createElement（“span”）；
setAttribute（“id”，“newdiv”+索引）；
var text=document.createTextNode（Math.floor（Math.random（）*100）+1）；
newdiv.appendChild（文本）；
newdiv.style.color=“白色”；
newdiv.style.width=“100px”；
newdiv.style.backgroundColor=“绿色”；
文件.body.appendChild（newdiv）；
}
函数removedivider（）
{
document.body.removeChild（document.getElementById（“newdiv”+索引））；
--指数；
}

应该可以工作，但我没有测试。

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

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

编辑：

这里有一个

您不太清楚应该删除哪个

div

。另外，在代码中，您反复使用相同的

id

附加

div

s。你不能那样做

我制作了一个快速示例，删除了首先附加的

div

（队列）。我根据当前时间为每个日期指定了一个

id

，但这并不是必须的。您总是可以删除父div的第一个子div，然后将这些

div

s追加到父div

但是，如果您计划将这些

div

s附加到不一定都在同一父项下的位置，那么给它们唯一的

id

s并存储所述

id

s是有用的

HTML

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

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>


DIVs
函数create_div（）{
document.getElementById（“button1”）.innerHTML=“创建另一个DIV”；
var div=document.createElement（“div”）；
var text=document.createTextNode（Math.floor（Math.random（）*100）+1）；
子目录（文本）；
div.style.color=“白色”；
div.style.width=“100px”；
div.style.backgroundColor=“绿色”；
文件.正文.附件（div）；
}
函数remove_div（）{
var div=document.getElementsByTagName（'div'），i；
对于（i=div.length-1；i>=0；i--）{
div[i].parentNode.removeChild（div[i]）；
返回false；
}
}
创建DIV
删除DIV

顺便说一下，不能有多个div具有相同的ID。检查工作情况

因此，您只需继续附加具有相同的

ID

的div？您希望每个div上都有一个

remove

按钮，还是一个只逐个删除

div

的按钮？我不确定为什么，但是为了让ButtonOnClick事件处理程序工作，我必须将它们内联声明。请参阅此答案的编辑。

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