Grow your CSS skills. Land your dream job.

Inserting the same code for use as a block of elements

  • # May 6, 2013 at 3:18 pm

    I have an “Add” button that will add a group of fields to a list/form using JQuery.
    What’s the best way to do this?

    Do you set up a hidden group on the page and use Jquery to clone() it, append to the list, and then remove the class that is hiding it?

    Or do you code this group of content in Javascript somehow and build it each time you want to add a new group to the page?

    # May 7, 2013 at 3:41 pm

    Use this as a little reference: http://codepen.io/johnmotyljr/pen/FtLxu

    I took a snippet from this site and basically hide the first element and copied the rest.

    # May 7, 2013 at 4:32 pm

    Personally I would build the whole thing in JS. I sort of like John’s implementation with a ‘prototype’ node, and it seems to do a better job of separating markup and script… but it still feels hacky to me and it’s weird to have markup for content that shouldn’t be there yet.

    # May 7, 2013 at 6:15 pm

    Ya know what, that is a good call. Build the elements with js, cache em, and duplicate. Afterwards set element attributes.

    @fooman, do you have some markup we could look at? Crocodillons implementation wouldn’t be hard at all.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".