jQuery - Removing a cloned element

Question

I am trying to make a web form which has the option to add and remove a new element. I can get this working as buttons outside of the source or cloned elements, but I am having a problem getting a 'Remove' button to work within a cloned element.

The HTML code is:

<table>
    <tr><td class="associate_column_left">
        Bursary award rates:</td><td class="associate_column_right">
        <div class="clone">£ <input type="text" name="AMOUNT" value="100" class="cl"><a href="#" class="remove_trigger">Delete amount</a></div>
        <div class="placer"></div>
        <p><a href="#" class="clone_trigger">Add another bursary award amount</a> &nbsp; <a href="#" class="remove_trigger">Remove last bursary award amount</a></p>
    </td></tr>
</table>

And the current jQuery is:

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").click(function () {
        $('.clone').first().clone().insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });
});
// End code for duplicating a div box

// Start code for removing an already duplicated div box
$(document).ready(function(){
    $(".remove_trigger").click(function () {
        if ($(".clone").length != 1) {
            $(".clone:last").remove();
        }
        //$('.clone:last').not('.clone:first').remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box

This is a working jfiddle at http://jsfiddle.net/dalepotter/fr8p8/1/

The 'Add another bursary award amount' and 'Remove last bursary award amount' links at the bottom of the table work fine, but not the 'Delete amount' - which is meant to remove the row that it is contained within.

Something seems to be wrong though... If anyone has any advice please do let me know - it's driving me a bit crazy!

Many thanks for any time that you can give...

Answer 1

The problem is that the .remove_trigger-elements are not present when you attach the click eventhandler, try changing this line

$(".remove_trigger").click(function () {

to this

$("table").on("click", ".remove_trigger", function () {

Answer 2

use:

$(".remove_trigger").live('click', function () {

In your version of jquery live works finely. http://jsfiddle.net/XgjKy/

Answer 3

This will do what you want and will also prevent you from deleting the first input field by misstake. The problem was that the click event is only set on doc ready, and then the clones are not yet initiated.

Btw: You have to fix the remove handler if you want to be able to delete the first row again...

// Start code for duplicating a div box
$(document).ready(function(){
    $(".clone_trigger").on("click",function () {
        var cloneElem = $('.default').clone().attr("class", "clone");
        cloneElem.find(".remove_trigger").on("click", function() {
            $(this).parent().remove();
        });
        cloneElem.insertBefore(".placer");
        $('input.cl:last').val('');
        event.preventDefault();
    });

    $(".remove_trigger").on("click", function () {
        $(".clone:last").remove();
        event.preventDefault();
    });
});
// End code for removing an already duplicated div box