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

Question

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

Любые идеи? Here готова скрипка для облегчения помощи ...

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

Check this here

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 s генерируется, если добавляются элементы/удалены:

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