最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery - Removing a cloned element - Stack Overflow

programmeradmin1浏览0评论

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 /

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...

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/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...

Share Improve this question asked Dec 2, 2013 at 12:55 user2761030user2761030 1,4852 gold badges21 silver badges35 bronze badges 1
  • Use delegation as in Esa's answer. This kind of question is asked hundred times a week... – A. Wolff Commented Dec 2, 2013 at 12:59
Add a ment  | 

3 Answers 3

Reset to default 5

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 () {

use:

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

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

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
发布评论

评论列表(0)

  1. 暂无评论