CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
kris
kris

Reputation: 47

How Can i add Delete button on each row pls?

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>

Upvotes: 2

Views: 341

Answers (1)

BillyNate
BillyNate

Reputation: 908

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>

Upvotes: 2

Related Questions