使用javascript单击div内的x按钮动态添加和删除div [重复]
Posted
技术标签:
【中文标题】使用javascript单击div内的x按钮动态添加和删除div [重复]【英文标题】：adding and deleting div dynamically on click on x button inside a div using javascript [duplicate] 【发布时间】：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>
【问题讨论】：
请阅读本文并再次询问***.com/help/how-to-ask 你尝试了什么？你在网上搜索过吗？我敢肯定这已经回答了几十次了 你有没有因为累而失败？如果是，请输入代码... 听起来像个购物清单：AngularJS:w3schools.com/angular/angular_application.asp @PrashanthBenny 你现在可以参考我的代码和问题 【参考方案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 中。以上是关于使用javascript单击div内的x按钮动态添加和删除div [重复]的主要内容，如果未能解决你的问题，请参考以下文章
使用纯 Javascript 滚动到可滚动 DIV 内的元素