Delete Row JQuery

Question

I would like to have a button with an X to the far right of each row every time it is created so that I can delete them once completed. How do I achieve this using the same JQuery method to create the rows? I tried the <tr> but I'm not building a table using these tags.

Thanks for the help

var $button = $('#add-row'),
    $row = $('.SigEvent').clone();

$button.click(function(){
    $row.clone().insertBefore( $button );
    });
});

<div class="Cell">
    <input type="text" name="Sig[]" style="width: 99%" required class="UPPER" />
</div>

score 0 · Answer 1 · answered Apr 28 '14 at 15:19

When creating the remove button you would bind a click on that to remove the parent row.

something list

$button.on('click', function() {
    var parentButton = $(this);
    $row.clone().insertBefore(parentButton );
    var closeButton = $("<button>");
    parentButton .append(closeButton);
    closeButton.on('click', function() {
        $(this).parents(parentButton).parent('.Cell').remove();
    });
});

Something similar to that. You can wrap additional events within the first.

Basically you will build the close button into the row append so that for each row that is built a new close button is generated. The closeButton.on('click') is bound to that element and then on the click you can perform any action, such as removing the parent row in this case.

Delete Row JQuery

1 Answers1