How to Append and Remove Column Divs

Question

I've trying to solve this for a while, I would appreciate any help. I have three columns. Each of the columns contains a pair of Add/Remove buttons at the top. I would like for the add button to append a clone of the parent column after the parent.I've tried various methods for cloning the parent div but to no avail.

I would also like for the remove button to remove the containing column. I only managed to have first column work with the remove button. This function does not work with the following Columns.

I would be very appreciative for some assistance. Thanks you.

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

     });

Your jsFiddle has some curious HTML: `
`. Typo?
– cssyphus Oct 07 '13 at 20:32 — cssyphus, Oct 07 '13 at 20:32

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

Working demo: http://jsfiddle.net/2WUtB/

EDIT 2: Demo 2 http://jsfiddle.net/RNW24/ with the use of $(this).closest('section.day-column').clone() you will only clone the nearest section not the whole lot which was happening in your case! :) Jquery has good documentation I reckon play around and you will be a happy lad! http://api.jquery.com/closest/

To add click with dynamically generated element you need to use .on API.

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

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then removes itself, see .one()

2ndly, remove "id=add" as you are duplicating the id and identity is always unique, use class instead.

3rdly html is bit wonky I will leave that on your project lead to get UI guys to decide.

Hope this helps :)

some helpful links:

Code

$(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');

    });

});

edited May 23 '17 at 11:57

Community

1
1

answered Oct 07 '13 at 20:38

Tats_innit

33,991
10
71
77

@ Tats_innit thanks. The method worked but unfortunately, it also cloned the entire row of columns after the first column. I just want the first column (parent) to clone a duplicate column after itself. I certainly appreciate your effort. Thanks for the insights. Cheers. – Leroy Tah-dow Herschel Silverm Oct 07 '13 at 22:11
@LeroyTah-dowHerschelSilverm Glad it helped `:))` saweet dude, I will take a look when I am free! – Tats_innit Oct 08 '13 at 01:18
@ Tats_innit I didn't mean any disrespect. I'm new to stackoverflow and I'm still figuring my stuff out. I asked for too much. I appreciate you sharing your knowledge and solutions. I'll be careful not to make the same mistake in the future. Thanks. – Leroy Tah-dow Herschel Silverm Oct 08 '13 at 02:04
@LeroyTah-dowHerschelSilverm LOl all cool bruv `:)` I will read the whole code and get back to you! Take easy yo! – Tats_innit Oct 08 '13 at 02:10
1

@ Tats_innit, Dude, Thank you! If your ever in chicago, look me up. I'll buy you a beer. – Leroy Tah-dow Herschel Silverm Oct 08 '13 at 03:07
@LeroyTah-dowHerschelSilverm Done! I will! Now never RageQuite SO `:)` gimme me couple of hours I will look into this issue eh! – Tats_innit Oct 08 '13 at 03:31
@LeroyTah-dowHerschelSilverm Here you go, now if you will click in the `add list` for section 1 it will only `clone` section 1 **Demo** http://jsfiddle.net/RNW24/ I will update the answer and have a good one! `:)` and if this help dont forget to accept the post! – Tats_innit Oct 08 '13 at 06:57

How to Append and Remove Column Divs

1 Answers1