Question

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

Answer 1

.closest()根据jQuery文档：

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

$(this).closest("div.fields .actionitems").remove();的问题在于div.fields .actionitems（指的是.actionitems div不是this的DOM父级（即{ {1}}元素）。

但是，select是可以在div.fields找到的父元素。您应该使用.closest()和$(this).closest("div.fields").find(".actionitems") .find() .actionitems，然后使用div将其删除。

http://jsfiddle.net/ezhcaLwb/

Answer 2

试试这个，替换：

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

使用：

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

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

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

jquery删除动态添加的元素

2 个答案: