Кнопка удаления не работает при изменении структуры

Question

Я динамически добавляю кнопки и прекрасно добавлю этот код, и когда я хочу удалить текстовые поля, которые пользователь создал, нажав кнопку добавить еще, работает отлично.

Код, в котором кнопка прекрасно добавляет и удаляет событие click.

Вот сценарий jquery !.

$(document).ready(function() { 

    var MaxInputs  = 8; //maximum input boxes allowed 
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID 
    var AddButton  = $("#AddMoreFileBox"); //Add button ID 

    var x = InputsWrapper.length; //initlal text box count 
    var FieldCount=1; //to keep track of text box added 

    $(AddButton).click(function (e) //on add input button click 
    { 
     if(x <= MaxInputs) //max input box allowed 
     { 
      FieldCount++; //text box added increment 
      //add input box 
      $(InputsWrapper).append('<div class="controls"><input type="text" class="form-control" name="sub-category-name[]" required/><a href="#" class="removeclass">&times;</a></div>'); 
      x++; //text box increment 
     } 
     return false; 
    }); 

    $("body").on("click",".removeclass", function(e){ //user click on remove text 
     if(x > 1) { 
      $(this).parent('div').remove(); //remove text box 
      x--; //decrement textbox 
     } 
     return false; 
    }) 
}); 

И вот Html.

<div class="form-group" id="InputsWrapper"> 
    <label for="sub-category-name">Sub Category Name </label> 
    <div class="controls"> 
     <input type="text" class="form-control" id="typeahead" name="sub-category-name[]" required> 
     <a href="#" id="AddMoreFileBox" class="btn btn-info">Add More Field</a> 
    </div> 
</div> 

Но когда я изменить код structue немного, чем пользователь может добавить текстовые поля, но не может удалить динамически добавлены текстовые поля.
Адрес: html-код.

<div class="form-group" id="InputsWrapper"> 
    <div class="input-group"><input type="text" class="form-control"> 
     <span class="input-group-btn"> <a href="#" id="AddMoreFileBox"><button class="btn btn-default" type="button">+</button></a> </span> 
    </div> 

</div> 

и вот сценарий.

$(document).ready(function() { 

    var MaxInputs  = 8; //maximum input boxes allowed 
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID 
    var AddButton  = $("#AddMoreFileBox"); //Add button ID 

    var x = InputsWrapper.length; //initlal text box count 
    var FieldCount=1; //to keep track of text box added 

    $(AddButton).click(function (e) //on add input button click 
    { 
     if(x <= MaxInputs) //max input box allowed 
     { 
      FieldCount++; //text box added increment 
      //add input box 
      $(InputsWrapper).append('<div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"> <a href="#" class="btn btn-default removeclass">X</a></span</div>'); 
      x++; //text box increment 
     } 
     return false; 
    }); 

    $("body").on("click",".removeclass", function(e){ //user click on remove text 
     if(x > 1) { 
      $(this).parent('div').remove(); //remove text box 
      x--; //decrement textbox 
     } 
     return false; 
    }) 
}); 

Answer 1

Вы должны ориентировать родителей по метке и/или имя класса:

$(this).closest("div").remove(); // walk up the DOM until the nearest DIV 

или

$(this).closest("div.form-group").remove(); // walk up to nearest div.form-group 

Изменение форм-группы к классу контейнера, который вы хотите удалить, если я получил неправильный контейнер

Answer 2

Понадобится: $(this).parent().parent().remove();

Во втором перечислении вы изменили структуру HTML, но забыл о JS.

Ваш HTML был:

div 
    a.removeclass 

Вы добавили слушателя a.removeclass, и вы идете вверх по DOM-дерево однажды:

$(this).parent('div').remove(); 

Ваш HTML Сейчас:

div 
    span 
     a.removeclass 

Теперь, если вы хотите удалить div, вам нужно дважды подойти к дереву, но однажды!