我试图创建一个简单的笔记应用程序。
现在我正在尝试弄清楚如何动态创建和删除DIV元素。我可以创建DIV s，但每次添加新div时，都会添加＆＃34;关闭＆＃34; ＆＃34; X＆＃34;到之前的每个div。所以我的问题是如何让java脚本只添加一个关闭＆＃34; X＆＃34;每div。
我的代码在下面供参考：
function more() {
var createdDiv = document.createElement("div");//sets the variable 'createdDiv' to create a HTML 'div' elemnet
createdDiv.className = "newDiv";
//createdDiv.setAttribute("id", "newDiv"+i);//sets the class name of the created div to newDiv
document.getElementById("top").insertBefore(createdDiv, document.getElementById("top").firstChild);
for(i = 0; i < document.querySelectorAll('#top .newDiv').length; i++){
var closeDiv = document.createElement("div");
closeDiv.setAttribute("id", "close"+i);
closeDiv.className = "close";
closeDiv.innerHTML = "X";
createdDiv.setAttribute("id", "note"+i);
createdDiv.setAttribute("onclick", "trash()");
document.getElementById("note"+i).insertBefore(closeDiv, document.getElementById("note"+i).firstChild);
document.getElementById("number").innerHTML = i+1;
}
}
function trash() {
for(i = 0; i < document.querySelectorAll('#top .newDiv').length; i++){
var o = document.getElementById("close"+i);
o.parentNode.removeChild(o);
}
}#header{
height:150px;
margin-bottom:10px;
}
#bottom{
height:10px;
background-color:blue;
}
.newDiv{
height:30px;
width:100%;
background-color:green;
border:2px solid #000;
}
#menu{
display:inline;
padding-bottom: 20px;
position:relative;
top:-60px;
}
#menu li{
list-style-type: none;
display:inline;
padding-right:
}
.item-padding{
padding-right: 7%;
}
.one{
Width: 50%;
height:100px;
background-color:#6CF;
}
.fragment {
font-size: 12px;
font-family: tahoma;
height: 140px;
border: 1px solid #ccc;
color: #555;
display: block;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
}
.fragment:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
.fragment img {
float: left;
margin-right: 10px;
}
.fragment h3 {
padding: 0;
margin: 0;
color: #369;
}
.fragment h4 {
padding: 0;
margin: 0;
color: #000;
}
.close {
float:right;
display:inline-block;
padding:2px 3px;
background:#ccc;
}
.close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}<!DOCTYPE html>
<html>
<head>
<title>Journal Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<button onclick="more();">MORE!</button>
<div id="top"></div>
<div onclick="trash();" id="test";" >Here</div>
<div id="number"></div>
<div class="one" id="two">
<span onclick="" class="test" id="close">X</span>
</div>
</body>
<footer>
<script src="coffee.js"></script>
</footer>
</html>
提前感谢您的帮助！
答案 0 :(得分：1)
您正在迭代div集合并更新ID并添加关闭控件。无需这样做，只需创建关闭控件并在创建时将其绑定到关联的div。
我不知道您的完整用例，但您发布的代码中不需要ID。我已将它们留在那里，以防您将它们用于其他处理，但没有理由将它们用于添加/删除用例。
还不清楚你的test div应该完成什么。
var curId = 0;
var number = document.getElementById("number");
function makeCloser(closeControl, divToRemove) {
var closer = function() {
divToRemove.parentElement.removeChild(divToRemove);
};
closeControl.addEventListener('click', closer);
}
function more() {
var createdDiv, closeDiv;
// Create a close control
closeDiv = document.createElement("div");
closeDiv.className = "close";
closeDiv.innerHTML = "X";
// Create a new div
createdDiv = document.createElement("div");
createdDiv.className = "newDiv";
createdDiv.setAttribute("id", curId++);
// Add the count to the div, just to prove what we're removing with the close control
createdDiv.innerHTML = curId;
// add the close control to the new div
createdDiv.appendChild(closeDiv);
// Wire up the close function to the close control
makeCloser(closeDiv, createdDiv);
// Add the new div to the DOM
document.getElementById("top").insertBefore(createdDiv, document.getElementById("top").firstChild);
// Update the current div ID number
number.innerHTML = curId;
}#header{
height:150px;
margin-bottom:10px;
}
#bottom{
height:10px;
background-color:blue;
}
.newDiv{
height:30px;
width:100%;
background-color:green;
border:2px solid #000;
}
#menu{
display:inline;
padding-bottom: 20px;
position:relative;
top:-60px;
}
#menu li{
list-style-type: none;
display:inline;
padding-right:
}
.item-padding{
padding-right: 7%;
}
.one{
Width: 50%;
height:100px;
background-color:#6CF;
}
.fragment {
font-size: 12px;
font-family: tahoma;
height: 140px;
border: 1px solid #ccc;
color: #555;
display: block;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
}
.fragment:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
.fragment img {
float: left;
margin-right: 10px;
}
.fragment h3 {
padding: 0;
margin: 0;
color: #369;
}
.fragment h4 {
padding: 0;
margin: 0;
color: #000;
}
.close {
float:right;
display:inline-block;
padding:2px 3px;
background:#ccc;
}
.close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}<button onclick="more();">MORE!</button>
<div id="top"></div>
<div id="number"></div>
答案 1 :(得分：0)
在more()函数中，您有一个循环，在每个迭代中添加一个closeDiv。这意味着你要添加尽可能多的＆＃39; X＆＃39;在你新创建的div中div，因为DOM中有newDiv类的div。
我会把你的方法改成这样的东西，即使我不能从这里测试它，直到你为我们提供一个完整代码和依赖项的工作小提琴。
function more() {
var createdDiv = document.createElement("div");//sets the variable 'createdDiv' to create a HTML 'div' elemnet
createdDiv.className = "newDiv";
//createdDiv.setAttribute("id", "newDiv"+i);//sets the class name of the created div to newDiv
document.getElementById("top").insertBefore(createdDiv, document.getElementById("top").firstChild);
var createdDivsQty = document.querySelectorAll('#top .newDiv').length;
var closeDiv = document.createElement("div");
closeDiv.setAttribute("id", "close"+createdDivsQty);
closeDiv.className = "close";
closeDiv.innerHTML = "X";
createdDiv.setAttribute("id", "note"+createdDivsQty);
createdDiv.setAttribute("onclick", "trash()");
document.getElementById("note"+i).insertBefore(closeDiv, document.getElementById("note"+i).firstChild);
document.getElementById("number").innerHTML = createdDivsQty+1;
}
答案 2 :(得分：0)
问题出在你的for循环中。据我所知，这真的是不必要的。代码可能会被清理一下，但为了解决您的问题，我相信以下更改将会起作用。
由于某种原因，代码已被复制两次，使用第一个代码片段并使用第一个＆＃34;运行代码＆＃34;进行测试。下面这个答案列出的按钮。
function more() {
var createdDiv = document.createElement("div");
createdDiv.className = "newDiv";
document.getElementById("top").insertBefore(createdDiv,document.getElementById("top").firstChild);
var closeDiv = document.createElement("div");
// set the length of the array to a variable.
var arrayLength = document.querySelectorAll('#top .newDiv').length;
closeDiv.setAttribute("id", "close"+ arrayLength);
closeDiv.className = "close";
closeDiv.innerHTML = "X";
// Move trash function to "X".
closeDiv.setAttribute("onclick", ("trash(" + arrayLength + ")"));
createdDiv.setAttribute("id", "note"+ arrayLength);
document.getElementById("note"+ arrayLength).insertBefore(closeDiv, document.getElementById("note"+document.querySelectorAll('#top .newDiv').length).firstChild);
document.getElementById("number").innerHTML = arrayLength;
}
function trash(rowNum) {
var o = document.getElementById("note"+rowNum);
o.parentNode.removeChild(o);
updateCounter(); // update the counter if you want to keep it.
}
function updateCounter(){
document.getElementById("number").innerHTML = document.querySelectorAll('#top .newDiv').length;
}#header{
height:150px;
margin-bottom:10px;
}
#bottom{
height:10px;
background-color:blue;
}
.newDiv{
height:30px;
width:100%;
background-color:green;
border:2px solid #000;
}
#menu{
display:inline;
padding-bottom: 20px;
position:relative;
top:-60px;
}
#menu li{
list-style-type: none;
display:inline;
padding-right:
}
.item-padding{
padding-right: 7%;
}
.one{
Width: 50%;
height:100px;
background-color:#6CF;
}
.fragment {
font-size: 12px;
font-family: tahoma;
height: 140px;
border: 1px solid #ccc;
color: #555;
display: block;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
}
.fragment:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
.fragment img {
float: left;
margin-right: 10px;
}
.fragment h3 {
padding: 0;
margin: 0;
color: #369;
}
.fragment h4 {
padding: 0;
margin: 0;
color: #000;
}
.close {
float:right;
display:inline-block;
padding:2px 3px;
background:#ccc;
}
.close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}<!DOCTYPE html>
<html>
<head>
<title>Journal Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<button onclick="more();">MORE!</button>
<div id="top"></div>
<div onclick="trash();" id="test";" >Here</div>
<div id="number"></div>
<div class="one" id="two">
<span onclick="" class="test" id="close">X</span>
</div>
</body>
<footer>
<script src="coffee.js"></script>
</footer>
</html>
function more() {
var createdDiv = document.createElement("div");//sets the variable 'createdDiv' to create a HTML 'div' elemnet
createdDiv.className = "newDiv";
//createdDiv.setAttribute("id", "newDiv"+i);//sets the class name of the created div to newDiv
document.getElementById("top").insertBefore(createdDiv, document.getElementById("top").firstChild);
for(i = 0; i < document.querySelectorAll('#top .newDiv').length; i++){
var closeDiv = document.createElement("div");
closeDiv.setAttribute("id", "close"+i);
closeDiv.className = "close";
closeDiv.innerHTML = "X";
createdDiv.setAttribute("id", "note"+i);
createdDiv.setAttribute("onclick", "trash()");
document.getElementById("note"+i).insertBefore(closeDiv, document.getElementById("note"+i).firstChild);
document.getElementById("number").innerHTML = i+1;
}
}
function trash() {
for(i = 0; i < document.querySelectorAll('#top .newDiv').length; i++){
var o = document.getElementById("close"+i);
o.parentNode.removeChild(o);
}
}#header{
height:150px;
margin-bottom:10px;
}
#bottom{
height:10px;
background-color:blue;
}
.newDiv{
height:30px;
width:100%;
background-color:green;
border:2px solid #000;
}
#menu{
display:inline;
padding-bottom: 20px;
position:relative;
top:-60px;
}
#menu li{
list-style-type: none;
display:inline;
padding-right:
}
.item-padding{
padding-right: 7%;
}
.one{
Width: 50%;
height:100px;
background-color:#6CF;
}
.fragment {
font-size: 12px;
font-family: tahoma;
height: 140px;
border: 1px solid #ccc;
color: #555;
display: block;
padding: 10px;
box-sizing: border-box;
text-decoration: none;
}
.fragment:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
.fragment img {
float: left;
margin-right: 10px;
}
.fragment h3 {
padding: 0;
margin: 0;
color: #369;
}
.fragment h4 {
padding: 0;
margin: 0;
color: #000;
}
.close {
float:right;
display:inline-block;
padding:2px 3px;
background:#ccc;
}
.close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}<!DOCTYPE html>
<html>
<head>
<title>Journal Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<button onclick="more();">MORE!</button>
<div id="top"></div>
<div onclick="trash();" id="test";" >Here</div>
<div id="number"></div>
<div class="one" id="two">
<span onclick="" class="test" id="close">X</span>
</div>
</body>
<footer>
<script src="coffee.js"></script>
</footer>
</html>