大家好，我有下面的代码，单击“添加”按钮会复制 DIV 及其全部内容。我想问一下我如何才能在重复的 div 中获得新的“删除”按钮，以防它是意外添加的，并且它还会删除整个重复的 div。
提前致谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Submit Case Study</title>
<!--<link rel="stylesheet" href="style.css" type="text/css"/>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var newNum = 1;
cloneMe = function(el) {
var newElem = el.clone().attr('id', 'author' + newNum);
newElem.children().each(function(index, elem) {
$(elem).attr('id', $(elem).attr('id') + newNum).attr('name', $(elem).attr('name') + newNum);
});
$('#authorlist').append(newElem);
newNum++;
};
});
</script>
<style>
.author {
position: relative;
padding-right: 5px;
padding-bottom: 5px;
margin: 1%;
width: 96%;
height: 80px;
border: 1px solid blue;
}
.boxtitle {
position: relative;
float: left;
padding-right: 10px;
padding-bottom: 5px;
margin: 3px;
height: 50px;
width: 6%;
}
.submit {
position: relative;
left: 47%;
bottom: 30%;
}
.help-block {
font-family: sans-serif;
font-size: 11px;
color: #AAA;
min-width: 75%;
max-width: 75%;
padding: 5px;
margin-top: 1px;
margin-left: 1%;
/*border: 1px solid green;*/
}
.checkbox {
position: relative;
font-family: sans-serif;
font-size: 12px;
line-height: 2em;
padding: 5px;
margin: 1%;
}
.author {
position: relative;
padding-right: 5px;
padding-bottom: 5px;
margin: 1%;
width: 96%;
height: 80px;
}
.box {
position: relative;
float: left;
padding-right: 10px;
padding-bottom: 5px;
margin: 3px;
height: 50px;
min-width: 20%;
max-width: 20%;
display: inline-block;
}
.nameauthor {
font-family: sans-serif;
padding: 5px;
margin: 1%;
width: 97%;
background: #EEEEEE;
border-radius: 4px;
border-style: inset;
border: 1px solid #d1d1d1;
}
.checboxauthor {
position: relative;
padding-top: 11px;
float: left;
width: 2%;
height: 60px;
}
.boxbutton {
position: relative;
padding-top: 7px;
margin-left: 3%;
float: left;
width: 8%;
display: inline-block;
}
.button {
font-family: sans-serif;
position: relative;
display: inline-block;
width: 100%;
}
.boxtitle {
position: relative;
float: left;
padding-right: 10px;
padding-bottom: 5px;
margin: 3px;
height: 50px;
width: 6%;
}
.titleauthor {
font-family: sans-serif;
padding: 5px;
margin: 3.67%;
width: 88%;
background: #EEEEEE;
border-radius: 4px;
border-style: inset;
border: 1px solid #d1d1d1;
}
</style>
</head>
<body>
<form name="submit" action="submit.php" method="GET">
<div id="authorlist">
<div class="author" id="author" name="author">
<div class="boxtitle" id="boxtitle" name="boxtitle">
<input type="text" class="titleauthor" id="title" name="title">
<p class="help-block" id="help-block" name="help-block">Title</p>
</div>
<div class="box" id="box" name="box">
<input type="text" class="nameauthor" id="f_name" name="f_name">
<p class="help-block" id="help-block" name="help-block">First name</p>
</div>
<div class="box" id="box" name="box">
<input type="text" class="nameauthor" id="l_name" name="l_name">
<p class="help-block" id="help-block" name="help-block">Last name</p>
</div>
<div class="box" id="box" name="box">
<input type="text" class="nameauthor" id="email" name="email">
<p class="help-block" id="help-block" name="help-block">E-mail address</p>
</div>
<div class="checboxauthor" id="checkboxauthor" name="checboxauthor">
<input type="checkbox" id="check" name="check">
<p class="help-block" id="help-block" name="help-block">Contact</p>
</div>
<div class="boxbutton" id="boxbutton" name="boxbutton">
<button type="button" class="button" id="AuthorButton" onclick="cloneMe($('#author'))" />Add author</button>
</div>
</div>
</div>
<input class="submit" type="submit" name="submit">
</form>
</body>
</html>
最佳答案
首先，添加一个将删除 div 的事件处理程序:
$(document).on("click", ".remove-btn", function() {
$(this).closest(".author").remove();
});
之后，在克隆 div 时附加删除按钮:
newElem.append("<button class='remove-btn'>Remove</button>");
关于javascript - 如何删除重复的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33872276/