Question

我的目标是在初始加载时有一个元素，此元素应该具有id =“something_ O ”，当单击添加链接时，在已存在的元素下，新的，相同的html元素应添加，而不是id =“something_o”，但id =“something_ 1 ”，或最后一个元素 + 1 ，具体而言。用户应该能够无限地添加这些元素。当用户单击“已删除”时，元素应该消失。

Example of this case

有什么想法吗？为了更方便的帮助，Here准备好了...

Answer 1

这样做的一个方法是：

$(document).ready(function() {
    $('body').on('click', '.AddEl', function() {
        $('.actions:first')
            .parent()
            .clone()
            .attr('id', 'element_' + $('.actions').length)
            .insertAfter($('.actions:last').parent());
    });
    $('body').on('click', '.RemoveEl', function() {
        $(this).closest('.actions').parent().remove();
    });
});

JS Fiddle demo

请注意我已经修改了你的html，以便克隆的第一个元素现在是id="element_0"，并使用CSS选择器将其和随后创建的所有元素作为目标：

div[id^=element] {
    /* css */
}

这可以简化，但这些只是我的第一个想法。

已编辑以提供稍微改进的版本，因为初始添加略有，或者看起来更简洁，并且还具有防止生成重复id的方法如果添加/删除元素：

$(document).ready(function() {
    $('body').on('click', '.AddEl', function() {
        var $elems = $('.actions').parent();
        $elems
            .first()
            .clone()
            .insertAfter($elems.last());
        $('div[id^="element_"]').each(
            function(i){
                $(this).attr('id','element_' + i);
            });
    });
    $('body').on('click', '.RemoveEl', function() {
        $(this).closest('.actions').parent().remove();
    });
});

JS Fiddle demo

Answer 2

var counter = 1;
$('.AddEl').live('click', function () {
    var el = $('#element_1').clone().attr('id', 'element_' + ++counter).appendTo('body');
});

$('.RemoveEl').live('click', function () {
    var el = $(this).parents('.elem')
    if (el.get(0).id !== 'element_1') el.remove();
});

Check this here

Answer 3

我只是覆盖你的代码。

你可以试试这个，也许你想要的东西。

http://jsfiddle.net/kongkannika/QeSPP/34/

如何使用jquery动态添加html元素？

3 个答案: