Wie kann ich ein Eltern-Div mit jQuery entfernen?

Question

Ich möchte das erste div und alles andere im Inneren entfernen. Hier im Codeausschnitt kann ich die erste Eingabe löschen, aber ich kann die anderen nicht löschen, wenn ich mehr hinzufüge.

Auf meiner Seite kann ich keine Eingabe löschen.

$(document).ready(function() { 
 
    var max_fields  = 4; //maximum input boxes allowed 
 
    //var wrapper   = $(".phone-field"); //Fields wrapper 
 
    var add_button  = $("#add_field_button"); //Add button ID 
 
    
 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(){ //on add input button click 
 
     if(x < max_fields){ //max input box allowed 
 
      $(add_button). 
 
      x++; //text box increment 
 
      $('.phone-field').append('<div class="col-xs-12 col-md-7 phone-class"><label for="telefones">Telefone</label><div class="input-group"><input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"><span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span></div></div>'); //add input box 
 
     } 
 
    }); 
 

 
     $("#remove_field").click(function(){ //user click on remove text 
 
     //e.preventDefault(); 
 
     //$('#remove_field').closest('div.phone-class').remove(); 
 
     $('#remove_field').parent().parent().parent().remove(); 
 
     });  
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://use.fontawesome.com/1cdb0cfd25.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group phone-field"> 
 
<div class="col-xs-12 col-md-7"> 
 
    <label for="telefones">Telefone</label> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"> 
 
    <span class="input-group-btn"> 
 
     <button class="btn btn-default" id="add_field_button" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button> 
 
    </span> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-xs-12 col-md-7 phone-class"> <!-- I want to delete this DIV here if i click on the button with id="remove_field"--> 
 
\t <label for="telefones">Telefone</label> 
 
\t <div class="input-group"> 
 
\t \t <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"> 
 
\t \t <span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span> 
 
\t </div> 
 
</div> 
 
</div>

Answer 1

, dass die neuen Elemente mit ID geschieht, weil remove_field nicht durch die Zeit, um Ihre Ready-Funktion lief bestanden haben. Auf diese Weise sind die einzigen Elemente, die an die Funktion gebunden sind, die das Feld entfernt, diejenige, die sich bereits auf dem DOM-Element befindet.

Zum Glück für Sie, das ist ein ziemlich häufiger Fehler und ein fairer einfacher zu lösen. Sie müssen nur ein permanent übergeordnetes Element mit jQuery .on Funktion binden:

$(document).ready(function() { 
 
    var max_fields  = 4; //maximum input boxes allowed 
 
    //var wrapper   = $(".phone-field"); //Fields wrapper 
 
    var add_button  = $("#add_field_button"); //Add button ID 
 
    
 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(){ //on add input button click 
 
     if(x < max_fields){ //max input box allowed 
 
      $(add_button). 
 
      x++; //text box increment 
 
      $('.phone-field').append('<div class="col-xs-12 col-md-7 phone-class"><label for="telefones">Telefone</label><div class="input-group"><input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"><span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span></div></div>'); //add input box 
 
     } 
 
    }); 
 

 
     $(".phone-field").on('click','#remove_field',function(){ //user click on remove text 
 
     //e.preventDefault(); 
 
     //$('#remove_field').closest('div.phone-class').remove(); 
 
     $('#remove_field').parent().parent().parent().remove(); 
 
     });  
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://use.fontawesome.com/1cdb0cfd25.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group phone-field"> 
 
<div class="col-xs-12 col-md-7"> 
 
    <label for="telefones">Telefone</label> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"> 
 
    <span class="input-group-btn"> 
 
     <button class="btn btn-default" id="add_field_button" type="button"><i class="fa fa-plus" aria-hidden="true"></i></button> 
 
    </span> 
 
    </div> 
 
</div> 
 

 

 
<div class="col-xs-12 col-md-7 phone-class"> <!-- I want to delete this DIV here if i click on the button with id="remove_field"--> 
 
\t <label for="telefones">Telefone</label> 
 
\t <div class="input-group"> 
 
\t \t <input type="text" class="form-control" name="telefone[]" placeholder="Digite seu telefone"> 
 
\t \t <span class="input-group-btn"><button class="btn btn-default" id="remove_field" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button></span> 
 
\t </div> 
 
</div> 
 
</div>

Answer 2

1) Wenn Sie innerhalb eines Zuhörers Verwendung "dieses" beziehen sich auf das Objekt

2) Verwenden Sie am nächsten anstelle von parent(). Parent(). Parent() oder Ihre Funktion wird nutzlos sein, wenn HTML ändert:

3) Machen Sie "remove_field" eine Klasse, wie Sie mehrere Elemente mit der gleichen ID haben, und Wie der vorherige Kommentar sagte, ist das nicht gültig HTML

$ (this) .closest ('div.phone-class'). remove();