我必須通過jQuery刪除父div

Question

我必須刪除有“輸入組”類的整個div。 我必須通過jQuery來做到這一點。 我試過jQuery，但div沒有刪除。

這是我的代碼，

 $(document).ready(function() { $(".wrapper").on('click', '.rmvBtn', function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="input-group"> <input type="text" class="form-control" name="field_name[]" value="" /> <span class="input-group-addon"> <a href="#" class="rmvBtn" title="Remove field""> <span class="glyphicon glyphicon-minus"></span> </a> </span> </div> </div> 

請告訴我代碼中有哪些錯誤？ 提前致謝。

Answer 1

你可以試試下面的代碼：

$(document).ready(function(){

    $(".wrapper").on('click', '.rmvBtn', function(e){ 
          e.preventDefault();
          $(this).closest('div.input-group').remove();
          x--;
    });

});

$ .closest用於遍歷DOM樹中的祖先，直到我們得到匹配。

在你的代碼中; rmvBtn位於<span>標記內。 因此$(this).parent('div')返回任何內容，因為$.parent()僅在DOM樹中遍歷單個級別。

Answer 2

使用closest而不是parents ，你會沒事的。
而你的HTML是錯誤的， a標簽在最后一個屬性上有兩個"" 。

 $(function() { $(".wrapper").on('click', '.rmvBtn', function(e) { e.preventDefault(); $(this).closest("div").remove(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="input-group"> <input type="text" class="form-control" name="field_name[]" value="" /> <span class="input-group-addon"> <a href="#" class="rmvBtn" title="Remove field"> <span class="glyphicon glyphicon-minus">btn</span> </a> </span> </div> </div> 

Answer 3

嘗試使用parents()代替parent()

$(this).parents('.input-group').remove();

Answer 4

使用“ closest可查找具有指定選擇器的最近元素。 通過從當前元素冒泡找到最接近的元素。

如果將額外的div添加到HTML中，也可以在刪除所需的div時使用div類選擇器是安全的

$(this).closest('div.input-group').remove();

 $(document).ready(function() { $(".wrapper").on('click', '.rmvBtn', function(e) { e.preventDefault(); $(this).closest('div.input-group').remove(); // x--; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="input-group"> <input type="text" class="form-control" name="field_name[]" value="" /> <span class="input-group-addon"> <a href="#" class="rmvBtn" title="Remove field""> <span class="glyphicon glyphicon-minus">remove</span> </a> </span> </div> </div>