Мне нужно удалить родительский div через jQuery

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

parents() попробовать вместо parent()

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

Answer 3

Используйте 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 4

Используйте closest, чтобы найти ближайший элемент с указанным селектором. Самый близкий элемент найден, пузырясь от текущего элемента.

использовать также селектор класса DIV, чтобы быть безопасным, удаляя необходимый DIV в случае дополнительных Див х добавляются в ваш HTML

$(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>