我有这个代码示例。单击“添加新行”按钮时，它会添加新行。下拉列表根据值确定要添加到每行的元素。用户可能会选择错误的选择并更改选择(现在它不会清除已经存在的项目)。我尝试过这一行，但它不起作用: $(this).closest("div.fields .actionitems").remove();
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="elem">
<!-- If there are software installed, then show them -->
<div class="row-fluid">
<div class="span3">Action</div>
<div class="span3">Phone Number</div>
<div class="span3">First and Last Name</div>
<div class="span3">Address</div>
<div class="span3"></div>
</div>
</div>
<a href="#" id="addElem">Add a line</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var softwareOptions = '<option value="">Please select an action</option>';
softwareOptions += '<option value="1">Delete</option> \
<option value="2">Move</option> \
<option value="3">New</option> \
<option value="4">Swap</option> ';
//add element to elem div
$("#addElem").click(function () {
var new_id = new Date().getTime();
var content = '<div class="fields"> \
<input type="hidden" name="assetSoftware.Index" value="' + new_id + '" /> \
<div class="row-fluid"> \
<div class="span3"> \
<select class="chzn-select softName" id="assetSoftware[' + new_id + '].softName" name="assetSoftware[' + new_id + '].softName">' + softwareOptions + '</select> \
</div> \
</div> \
</div>';
$("#elem").append(content);
});
//remove fields
$("#elem").on("click", ".remove", function () {
$(this).closest("div.fields").remove();
});
//action type selected
$("#elem").on("change", ".softName", function () {
$(this).closest("div.fields .actionitems").remove();
var test = "";
var new_id = new Date().getTime();
if ($(this).val() == 4) {
test = '<div class="actionitems">Person 1\
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].phone" /> \
</div> \
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].usernames" /> \
</div> \
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].address" /> \
</div> \
Person 2\
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].phone" /> \
</div> \
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].usernames" /> \
</div> \
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].address" /> \
</div> \
<div class="span3"> \
<a class="remove" href="#">X</a> \
</div></div>';
}
else {
test = '<div class="actionitems">\
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].phone" /> \
</div> \
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].usernames" /> \
</div> \
<div class="span3"> \
<input type="text" name="assetSoftware[' + new_id + '].address" /> \
</div> \
<div class="span3"> \
<a class="remove" href="#">X</a> \
</div>\
</div>';
}
$(this).closest("div.fields").append(test);
});
});
</script>
</body>
</html>
最佳答案
.closest() 根据 jQuery 文档:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
$(this).closest("div.fields .actionitems").remove(); 的问题在于 div.fields .actionitems (指的是.actionitems div 不是 this(即 select 元素)的 DOM 父级。
但是，div.fields 是一个父元素，可以使用.closest() 找到它。您应该使用 $(this).closest("div.fields").find(".actionitems") 和 .find() .actionitems div 然后 .remove(); 将其删除。
关于javascript - jquery 删除动态添加的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27003291/