jquery remove elements added dynamically
Question
I have this code sample. It adds new lines when the Add new line button is clicked. The drop down determines the elements to be added onto each line depending on the value. The user might select the wrong selection and would change the selection (right now it is not clearing items already there). I have tried with this line but it is not working: $(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>
2 answers
solution1
1 ACCPTED 2014-11-18 20:40:51
.closest() according to jQuery docs:
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.
The problem with $(this).closest("div.fields .actionitems").remove(); is that div.fields .actionitems (referring to the .actionitems div isn't a DOM parent of this (which is the select element).
However, div.fields is a parent element which can be found with .closest() . You should use $(this).closest("div.fields").find(".actionitems") and .find() the .actionitems div and then .remove(); on that to remove it.
solution2
0 2014-11-18 20:46:18
Try this, replace:
$(this).closest("div.fields .actionitems").remove();
with:
$(this).parent().parent().next().remove();
This code select the next row of the row which contain the select and removes it.
Here is the Fiddle http://jsfiddle.net/nkz7csxn/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.