如何在每行上添加刪除按鈕？

Question

任何一個可以讓我知道 我怎麼可以從下面的代碼 [的jsfiddle] [1]

var counter = 1; 
jQuery('a.add-author').click(function(event){ 
    event.preventDefault(); 
    counter++; 
    var newRow = jQuery('<div class="row"><div class="col-lg-6"><input type="text" name="first_name' + 
     counter + '"/></div><div class="row"><div class="col-lg-6"><input type="text" name="last_name' + 
     counter + '"/></div></div>'); 
    jQuery('div.row').append(newRow); 
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="row"> 
    <div class="col-lg-6"><input type="text" name="first_name" /></div><div class="col-lg-6"><input type="text" name="last_name" /></div> 
</div> 
<a href="#" title="" class="add-author">Add Author</a>

Answer 1

要「刪除」添加在每一行請 刪除按鈕的元素你可以使用jQuery('element').remove()函數。

通過使用即使產生以後的元素jQuery('element').on()可以監聽事件。

請仔細閱讀關於.on()的文檔！

var counter = 1; 
 
jQuery('a.add-author').click(function(event){ 
 
    event.preventDefault(); 
 
    counter++; 
 
    var newRow = jQuery('<div class="row"><div class="col-lg-6"><input type="text" name="first_name' + 
 
     counter + '"/></div><div class="col-lg-6"><input type="text" name="last_name' + 
 
     counter + '"/></div><div><a href="#" class="delete">delete</a></div></div>'); 
 
    jQuery('.add-author').before(newRow); 
 
}); 
 

 
//Bound to 'body' for this sample, bind to you own wrapper element when using this! 
 
jQuery('body').on('click', '.delete', function(event) 
 
{ 
 
    event.preventDefault(); 
 
    $(this).closest('.row').remove(); 
 
});

.row { position: relative; width: 500px; height: auto; margin: 5px 0; overflow: hidden; } 
 
.row div { position: relative; float: left; width: 150px; height: auto; overflow: hidden; }

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-lg-6"><input type="text" name="first_name" /></div><div class="col-lg-6"><input type="text" name="last_name" /></div> 
 
</div> 
 
<a href="#" title="" class="add-author">Add Author</a>