2016-04-20 11 views
0

Guten Tag tolle Leute, ich brauche Hilfe, um Remove-Taste nach dem geklonten passieren. Die Schaltfläche Entfernen sollte das geklonte Feld entfernen. Jeder Vorschlag wäre willkommen. Bootply Version - http://www.bootply.com/LiqkgWUFF6Add Remove Button auf Cloned Field

Vielen Dank im Voraus.

var template = $('#line_1').clone(); 
 

 
$('#cloneButton').click(function() { 
 
    var rowId = $('.row').length + 1; 
 
    var klon = template.clone();   
 
    klon.attr('id', 'line_' + rowId) 
 
     .insertAfter($('.row').last()) 
 
     .find('option') 
 
     .each(function() { 
 
      $(this).attr('id', $(this).attr('id').replace(/_(\d*)$/, "_"+rowId)); 
 
     })     
 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="row" id="line_1"> 
 

 
<div class="form-group col-md-2"> 
 
           <label class="control-label">State</label> 
 
             <select class="form-control"> 
 
    <option id="Select_1">Select State</option> 
 
    <option id="Selangor_1">Selangor</option> 
 
    <option id="KualaLumpur_1">Kuala Lumpur</option> 
 
    <option id="Malacca_1">Malacca</option> 
 
    <option id="Perak_1">Perak</option> 
 
<option id="Kedah_1">Kedah</option> 
 
</select> 
 
          </div> 
 
    </div> 
 

 
<a id="cloneButton" class="btn btn-primary">Add State</a>

Antwort

1

Try this:

var template = $('#line_1').clone(); 

$('#cloneButton').click(function() { 
    var rowId = $('.row').length + 1; 
    var klon = template.clone(); 
    console.log(klon)  
    klon.attr('id', 'line_' + rowId) 
     .insertAfter($('.row').last()) 
     .find('option') 
     .each(function() { 
      $(this).attr('id', $(this).attr('id').replace(/_(\d*)$/, "_"+rowId)); 
     })  

     $("#line_" + rowId).append("<a href='javascript:void(0);' class='remove'>delete</a>")    
}); 

$(document).on("click", ".remove", function() { 
    $(this).closest(".row").remove(); 
}); 
+0

Danke Dhara, wirklich zu schätzen. – Jepf

+1

@Jepf das ist die gleiche Antwort, die ich 5 Minuten vorher gepostet habe. –

+0

@Dhara Parmar, wie unterscheidet es sich von meiner Antwort? –

1

Sie können eine Entfernen-Taste auf der Zeile div sich das Click-Ereignis mit Ereignis Delegation hinzufügen und binden.

var template = $('#line_1').clone(); 

$('#cloneButton').click(function() { 
    var rowId = $('.row').length + 1; 
    var klon = template.clone(); 
    klon.attr('id', 'line_' + rowId) 
    .insertAfter($('.row').last()) 
    .find('option') 
    .each(function() { 
     $(this).attr('id', $(this).attr('id').replace(/_(\d*)$/, "_" + rowId)); 
    }) 
}); 

$(document).on("click", ".remove", function() { 
    $(this).closest(".row").remove(); 
}); 

HTML:

<div class="row" id="line_1"> 
    <div class="form-group col-md-2"> 
    <label class="control-label">State</label> 
    <select class="form-control"> 
     <option id="Select_1">Select State</option> 
     <option id="Selangor_1">Selangor</option> 
     <option id="KualaLumpur_1">Kuala Lumpur</option> 
     <option id="Malacca_1">Malacca</option> 
     <option id="Perak_1">Perak</option> 
     <option id="Kedah_1">Kedah</option> 
    </select> 
    </div> 
    <input type="button" class="remove" value="remove" /> 
</div> 

<a id="cloneButton" class="btn btn-primary">Add State</a> 

Fiddle

+0

Ich sehe Sie verwenden (Dokument) .auf() Funktion. Delegation ist eine gefährliche Sache, mein Freund. Dies wäre ein fehlgeschlagener Versuch, wenn etwas wie "event.stopPropagation()" im Skript aufgerufen wird. –

+1

@FaisalAshfaq können Sie erklären, wie könnte es eine gefährliche Sache sein? Es wäre großartig, wenn Sie es mit einem Arbeitsbeispiel erklären könnten. Ich habe im Beispiel von OP keinen Wrapper-Elternteil gesehen, deshalb habe ich versucht zu antworten, ohne die HTML-Struktur zu ändern. –

+0

@AnoopJoshi, beim Laden sollte die Schaltfläche Entfernen nicht sichtbar sein. Nach dem Klonen sollte der Entfernen-Button erscheinen. – Jepf

Verwandte Themen