How Can i add Delete button on each row pls?

Question

can any one let me know how can i add the delete button on each row pls from the below code [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

To "delete" an element you can use the jQuery('element').remove() function.

By using the jQuery('element').on() you can listen to events even if the element is created later on.

Please read the documentation about .on() carefully!

 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>