jQuery删除动态添加的元素

jquery remove elements added dynamically

本文关键字：元素 添加 动态 删除 jQuery      更新时间：2023-09-26

我有这个代码示例。单击"添加新行"按钮时，它会添加新行。下拉列表根据值确定要添加到每行的元素。用户可能会选择错误的选择并更改选择（现在它不会清除已经存在的项目）。 我已经尝试过这条线，但它不起作用：$(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>
根据

jQuery文档.closest()：

对于集合中的每个元素，通过测试元素本身并在 DOM 树中遍历其祖先来获取与选择器匹配的第一个元素。

$(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();将其删除。

http://jsfiddle.net/ezhcaLwb/

试试这个，替换：

$(this).closest("div.fields .actionitems").remove();

跟：

$(this).parent().parent().next().remove();

此代码选择包含select的行的下一行并将其删除。

这是小提琴 http://jsfiddle.net/nkz7csxn/

相关文章：