Jquery: Element in Formular aus Schaltfläche entfernen

Question

Ich versuche, Element in Formular zu entfernen, es funktioniert ok, nur Problem muss der Benutzer zweimal klicken, um Element zu entfernen, danach funktioniert alles einwandfrei, nur Erstbenutzer muss zweimal klicken irgendwelche Ideen oder ähnliches Problem?

Hier ist mein Code

function deleteParentElement(){ 
      $(".remove-button").click(function(event) { 
      $(this).parents('.has-delete').remove(); 
       return false; 
      });     
     } 

Hier HTML

<div class="input-group has-delete"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate"> 
      <button class="btn btn-input remove-button" onclick="deleteParentElement();" type="button"><i class="icon-close"></i></button> 
     </div> 
    </div> 
</div> 

Answer 1

In Sie funktionieren, sind Sie ein Klick-Ereignis-Listener anbringen, die, wenn das übergeordnete Element entfernen ausgelöst wird, sollten Sie werden entfernt das Element direkt.

function deleteParentElement(){ 
    $(this).parents('.has-delete').remove(); 
} 

Aber das ist immer noch der falsche Weg, solch einen Event-Handler anzuwenden. Sie können die deleteParentElement Funktion entfernen und das gleiche Ergebnis erzielen wie so:

$(document).ready(function() { 

    /* your code */ 

    $(".remove-button").on("click", function() { 
     $(this).parents(".has-delete").remove() 
    }) 
}) 

Answer 2

Es ist so offensichtlich, weil Sie eine onClick Funktion aufrufen, innerhalb dessen Sie einen Event-Handler wieder für Klick registrieren. Also, entferne onclick und registriere einfach den Klick auf DOM Ready Event.

<button class="btn btn-input remove-button"> 

      $(".remove-button").click(function(event) { 
      $(this).parents('.has-delete').remove(); 
       return false; 
      }); 

Answer 3

• entfernen Inline-Event-Handler
• Rufen Sie die Funktion auf $(document).ready

$(document).ready(function() { 
 
    $(".remove-button").click(function(event) { 
 
    $(this).parents('.has-delete').remove(); 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="input-group has-delete"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate"> 
 
     <button class="btn btn-input remove-button" type="button"><i class="icon-close"></i></button> 
 
    </div> 
 
    </div> 
 
</div>

Wenn Elemente dynamisch hinzugefügt werden, verwenden Event delegation,

$(document).ready(function() { 
 
    $("body").on('click', '.remove-button', function(event) { 
 
    $(this).parents('.has-delete').remove(); 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="input-group has-delete"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate"> 
 
     <button class="btn btn-input remove-button" type="button"><i class="icon-close"></i></button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

<div class="input-group has-delete"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate"> 
      <button class="btn btn-input remove-button" type="button"><i class="icon-close"></i></button> 
     </div> 
    </div> 
</div> 

<script> 
$(".remove-button").click(function(event) { 
      $(this).parents('.has-delete').remove(); 
       return false; 
      }); 

</script> 

Answer 5

Dies sollte für Sie arbeiten ....

$(document).ready(function(){ 
 
    $(".remove-button").click(function() { 
 
    $('.has-delete').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group has-delete"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate"> 
 
      <button class="btn btn-input remove-button" type="button">Remove</button> 
 
     </div> 
 
    </div> 
 
</div>

Answer 6

Das erste Mal, wenn Sie auf die Schaltfläche klicken, wird Ihr deleteParentElement function führt aus, was einen Click-Event-Handler an das Element anhängt. Der Code wird jetzt nicht ausgeführt. Jetzt, da ein Click-Event-Handler angefügt wurde, wird beim nächsten Klicken der Code innerhalb von $(".remove-button").click(function(event) ausgeführt und Ihr Element wird entfernt.

Es gibt zwei Lösungen für Ihr Problem.

Lösung 1 Bearbeiten Sie Ihr Skript zu diesem

function deleteParentElement(){ 
$(this).parents('.has-delete').remove(); 

}

Lösung-2 Bearbeiten Sie Ihre HTML zu diesem

  <button class="btn btn-input remove-button" type="button"><i class="icon-close"></i></button> 

und Ihr Skript zu diesem

$(".remove-button").click(function(event) { 
     $(this).parents('.has-delete').remove(); 
      return false; 
     });