使用javascript单击div内的x按钮动态添加和删除div [重复]答案

【问题标题】：adding and deleting div dynamically on click on x button inside a div using javascript [duplicate]使用javascript单击div内的x按钮动态添加和删除div [重复]
【发布时间】：2017-12-26 02:24:08
【问题描述】：

点击 html 页面中的添加按钮时，应在 html 页面上显示一个 div，多次单击应显示多个 div。每个 div 都应该有 X 图标，单击 x 时，div 应该从 UI 中消失。它还应该维护一个动态生成的 div 元素的 id 数组，这些元素应该显示在控制台上，并且每当删除该特定 div 时都应该删除该 id。

这段代码工作正常，但我可以使用数组代替计数器，每当创建 div 时将动态生成 id 并在删除 div 时删除 id。？

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>Click the button to make a Division element.</p>

<button id="button" onclick="myFunctionAdd()">Add</button>

<div id="myDIV">
</div>

<script>

 var counter=1;
function myFunctionAdd() 
    {

    var x = document.createElement("DIV");
    x.id="div"

    var divNumber = counter;
    counter++;
    console.log("Div Number: "+ divNumber + " is created");

    var z= document.createElement("button");
    z.id="btn";
    x.setAttribute("style", "border :1px solid;height: 250px; width: 250px; top: 741px; left: 491px; padding:10px; margin: 50px;");
    z.setAttribute("style", "background: #000 url(/home/subodh/Desktop/Widget/icon_incorrect.svg) no-repeat 0px 0px; height: 30px; width:40px; top: 6px; left: 4px; float: right; margin: 0px; padding:0px; clear: both; float:right;");


    x.appendChild(z);
    document.body.appendChild(x).appendChild(z);

    z.onclick = function remove(btn) 
    {

    console.log("Div Number: "+ divNumber + " is deleted");
    x.parentElement.removeChild(x);
    }

   }


</script>

</body>
</html>

【问题讨论】：

请阅读本文并再次询问stackoverflow.com/help/how-to-ask
你尝试了什么？你在网上搜索过吗？我敢肯定这已经回答了几十次了
你有没有因为累而失败？如果是，请输入代码...
听起来像个购物清单：AngularJS:w3schools.com/angular/angular_application.asp
@PrashanthBenny 你现在可以参考我的代码和问题

标签： javascript html css

【解决方案1】：

请参阅此示例：https://codepen.io/dsomekh/pen/GEVNWb

function Clone() {


  var clone = document.getElementById('thediv').cloneNode(true); // "deep" clone
  document.getElementById("container").appendChild(clone);
}

function Delete(button) {
  var parent = button.parentNode;
  var grand_father = parent.parentNode;
  grand_father.removeChild(parent);
}

.mydiv {
  border: 2px solid red;
}

<div class="container" id="container">
  <div class="mydiv" id="thediv">
    I am the div
    <button type="button" onclick="Clone()" ) ">Clone</button>
    		<button type="button " onclick="Delete(this) ")">Delete</button>
  </div>
  <div>

【讨论】：

另外，在这段代码中，我想在创建每个 div 时在控制台中显示它们的唯一 ID，并且每当删除该特定 div 时都应该删除该 ID。

【解决方案2】：

试试这个

function adddiv() {
  document.body.innerHTML += '<div id=' + Math.random() + '><button id="btn" onclick=closediv(this)>X</button>' + Math.random() + '</div>';
}

function closediv(e) {
  var par = $(event.target).parent();
  par.remove();
}

div {
  border: solid 1px red;
  width: 150px;
  height: 100px;
  margin: 2px;
}

#btn {
  clear: both;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add" onclick=adddiv()>Add</button>

现在所有 div 都使用唯一 id 并使用 javascript 创建

【讨论】：

此外，在这段代码中，我想在创建每个 div 时在控制台中显示它们的唯一 id，并且只要删除该特定 div，就应该删除该 id。
我已经更新了我的答案，现在用唯一 ID 生成的 div 检查它@maggie
如果这个答案在 javascript 中提供会更好，因为我不知道 jquery :)
现在所有 div 都使用唯一 id 创建并使用 javascript @maggie
但是现在你的 closeDiv 方法不起作用。我想你忘了把它编辑成javascript。它仍然在 jQuery 中。