在jquery中获取嵌套DIV的索引以删除html元素

Question

我在HTML代码中有嵌套的DIV

<form enctype="multipart/form-data" action="" method="post">
                         <div class="table" id="preference">
                            <div class="tr">
                                <div class="td"><p>Category : </p></div>
                                <div class="td">
                                    <?php $js = 'id="selCat"'; ?>
                                    <?php echo form_dropdown('selCat',$subcats,'0', 'selCat');?>
                                </div>
                                <div class="td"><p>Sub Category : </p></div>
                                <div class="td">
                                    <select id="selSubCat" name="selSubCat">
                                        <option value="0" selected="true">-Select a category first-</option>
                                    </select>
                                </div>
                                <div class="td"><p>Score : </p></div>
                                <div class="td">
                                    <input type="text" size="1"/>
                                </div>
                            </div>
                         </div>
                         <div class="tr">
                                <a href="#" id="btn_Add">Add more [+]</a>
                         </div>
                    </form>

因此，无论何时单击添加更多按钮，都将调用jquery函数并将新元素添加到with id =＆＃34; preference＆＃34;

这是jquery：

<script type="text/javascript">

     $(document).ready(function(){
        var fileId = 0;
        var wrapper = $("#preference");
        var add_button = $("#btn_Add");
        var x = 1;

     $(add_button).click(function(e){
        e.preventDefault();
        x++;
        $(wrapper).append('<div class="tr">' 
            +   '<div class="td">Category :</div>'
            +   '<div class="td">'
                +   '<select>'
                        + '<option>1 </option> '
                +   '</select>' 
            +   '</div>'
            +   '<div class="td">Sub Category :</div>'
            +   '<div class="td"> </div>'
            +   '<div class="td">Score :</div>'
            +   '<div class="td"><input type="text" size="1" />&nbsp;&nbsp;<a href="#" id="btnRemove">Remove&nbsp;[-]</a></div>'
            +
            '</div>'
            );
     });

     $(wrapper).on("click","#btnRemove", function(e){
        e.preventDefault();
        var index = $(this).closest("#tr").index();
        alert(index);
        //$(this).parent('#preference').remove(); 
        x--;

     });

      $('#selCat').change(function(){
       var id = $(this).val(); // selected name from dropdown #table
       $.ajax({
        url: '<?php echo base_url();?>'+'index.php/client/ajax_subcat',  // or "resources/ajax_call" - url to fetch the next dropdown
        async: false,
        type: "POST",     // post
        data: {id:id},  // variable send
        dataType: "html",    // return type
        success: function(data) {  // callback function
         $('#selSubCat').html(data);
        }
       })
      });
     });
    </script>

添加按钮的结果如下图所示

我想要做的是，当点击删除按钮（链接）时，它将删除属于该特定行的所有元素。

我怎样才能实现它？ 我知道我需要获取所单击行的索引并删除与该行对应的元素。 如何在嵌套div中获取索引，就像我拥有的​​那样？

Answer 1

当您尝试使用.closest()时，您已经关闭了，但是您不小心尝试获取标识为TR的元素，而不是获取类TR。另外，你不需要索引;只需直接删除TR。

$(this).closest('.tr').remove();

另外，请不要忘记，ID设计为唯一。如果您需要多次使用ID，则需要使用类，而不是ID。 btnRemove应该是一个类，而不是ID。

Answer 2

由于您在class上使用名为 tr 的div，并且您将其引用id，即#删除点击，因此您获得的索引为-1。请使用类名称来引用它，如下所示：

<强> DEMO

$(wrapper).on("click","#btnRemove", function(e){
     e.preventDefault();
     var index=$(this).closest('.tr').index();
     alert(index);
     $(this).closest(".tr").remove(); //remove it directly
     x--;
}); 

Answer 3

你正在使用类，所以slector应该是.tr

var index = $('form .tr').index($(this).closest(".tr"));
alert(index);

如果您只是想删除它，那么

$(this).closest(".tr").remove();