Как добавить и удалить столбцы столбцов

Question

Я пытаюсь решить это некоторое время, я был бы признателен за любую помощь. У меня есть три столбца. Каждый из столбцов содержит пару кнопок «Добавить/Удалить» вверху. Я хотел бы, чтобы кнопка добавления добавила клон родительского столбца после родителя. Я пробовал различные методы клонирования родительского div, но безрезультатно.

Я также хотел бы удалить кнопку удаления, чтобы удалить колонку. Мне удалось запустить первую колонку с кнопкой удаления. Эта функция не работает со следующими столбцами.

Я бы очень признателен за помощь. Спасибо вам.

http://jsfiddle.net/equiroga/h2dnn/2/

$(document).ready(function() { 

    $("#add").click(function() { 
    $(".day-column").append(".day-column"); 
    $('.day-column').clone().attr('class','.day-column').insertAfter('.day-  column:first'); 
    }); 

    $("#remove").click(function() { 
    $(".day-column:first").remove('.day-column:first'); 
    }); 

    }); 

Answer 1

Работа демо: http://jsfiddle.net/2WUtB/

EDIT 2: Demo 2http://jsfiddle.net/RNW24/ с использованием $(this).closest('section.day-column').clone() вы только клонировать ближайший участок не весь участок, который происходит в ваш случай! :) JQuery имеет хорошую документацию. Я считаю, что вы играете, и вы станете счастливым парнем! http://api.jquery.com/closest/

Чтобы добавить клик с помощью динамически созданного элемента, вам необходимо использовать API .on.

API: .on: http://api.jquery.com/on/

.on() метод придает обработчики событий выбранного в данный момент установлено элементов в объекте JQuery. Начиная с jQuery 1.7, метод .on() предоставляет все функции, необходимые для прикрепления обработчиков событий. Для help в преобразовании из старых методов событий jQuery см. .bind(), .delegate() и .live(). Чтобы удалить события, связанные с .on(), см. .off(). Чтобы прикрепить событие, которое работает только один раз, а затем удаляет сам, см .one()

2ndly, удалить «ID = добавить», как вы копируете id и идентичность всегда уникален, используйте class вместо этого.

3-ий html немного уволен. Я оставлю это в вашем проекте, чтобы ребята решили решить.

Надеется, что это помогает :)

некоторых полезные ссылок:

• Click event doesn't work on dynamically generated elements

• What's wrong with the jQuery live method?

Код

$(document).ready(function() { 

    $(document).on('click', '.add', function() { 
     alert('Click is bind with add button'); 
     $("ul").append("<li></li>"); 
     $('.day-column').clone().attr('class', '.day-column').insertAfter('.day-column:first'); 
    }); 

    $(document).on('click', '.remove', function() { 
     alert('Click is bind with remove button'); 
     $(".day-column:first").remove('.day-column:first'); 

    }); 

});