Как динамически добавлять html-элементы с помощью jquery?

Question

Моя цель состоит в том, чтобы при начальной загрузке был один элемент, этот элемент должен иметь идентификатор = "что-то_ O ", когда нажата ссылка для добавления, под уже существующим элементом, новый, тот же элемент HTML долженбыть добавленным не с id = "thing_o ", а с id =" something_ 1"или последним элементом + 1 , если быть точным.Пользователь должен иметь возможность добавлять эти элементы бесконечно.Когда пользователь нажимает кнопку «Удалить», элемент должен исчезнуть.

Есть идеи? Здесь подготовлена ​​скрипка для облегчения помощи ...

Answer 1

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();
});

Проверьте это здесь

Answer 2

Один из способов сделать это:

$(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 3

Я просто перезаписал ваш код.

Вы можете попробовать это, может, что-то, что вы хотите.

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