CODEWITHSUNDEEP
javascriptjqueryhtml
BRBT
BRBT

Reputation: 1487

Appending an element to a cloned element

I have a form with an HTML table that has a button (#addRows) that when clicked will clone the first table row and append it to the bottom of the table.

This table resides in a section of HTML with some other input fields that can also be cloned and appended onto the bottom of my form. When I am cloning the section I am changing all child element ID's to include a number that can be iterated dependent on how many times the user clones the section.

Example 

<div id="someID"> ... </div>
<div id="someID2"> ... </div>
<div id="someID3"> ... </div>

I am doing this with JQuery like this

$(function() {    
  var $section = $("#facility_section_info").clone();
  var $cloneID = 1; 
    $( ".addSection" ).click(function() { 
        var $sectionClone = $section.clone(true).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + $cloneID); });
        $('#facility_section_info').append($sectionClone);
        $cloneID++; 
    });
});

When I clone the section that holds the table I am also cloning the #addRows button which when clicked should append a table row to the table it is being clicked on. However if I clone my section and I click on my second `#addRows button it will clone my table row but it is appending to my first table and not the second.

Here is my addRows button and event handler

<input type="button" value="+" id="addRows" class="addRows"/>

$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone();
        $idVal = 1;
        $(document).on('click', '.addRows', function(){
            var copy = $firstTRCopy.clone(true);
            var newId = 'row' +$idVal;
            copy.attr('id', newId);
            $idVal += 1;
            copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>");
            $componentTB.append(copy);
        });
});

My question is, when I clone my section of HTML that holds my table and #addButton how can I ensure that when the user clicks on the original button it will clone and append to that table or if I click the cloned button it will clone and append to the cloned table only?

If anything is unclear please let me know so I can try to better explain what I am trying to do, thanks.

Here is a JSFiddle demonstrating the problem I am having.

Upvotes: 3

Views: 411

Answers (1)

mplungjan
mplungjan

Reputation: 177694

Because I truly love you BigRabbit, here is where I got to. You will see at least one useful fix here:

    var $sectionClone = $section.clone(true);
    $sectionClone.find("*[id]").andSelf().each(function () {
        $(this).attr("id", $(this).attr("id") + $cloneID);
    });

and a fix for an issue you did not report yet

$copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');

using 

$("#facility_section_info").on('click', '.remove', function (e) {
    e.preventDefault();
    $("#"+$(this).data("removeid")).remove();
});

FIDDLE

$(function () {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone(),
        $section = $("#facility_section_info>fieldset").clone(),
        $cloneID = 0,
        $idVal = 0;

    $("#facility_section_info").on('click', '.remove', function (e) {
        e.preventDefault();
        $("#"+$(this).data("removeid")).remove();
    });

    $("#facility_section_info").on('click', '.addRows', function () {
        $idVal++;
        var $copy = $firstTRCopy.clone(true);
        var newId = 'row' + $idVal;
        $copy.attr('id', newId);
        $copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>');
        $(this).closest("fieldset").find("tbody").append($copy);
    });

    $("#facility_section_info").on("click", ".addSection", function () {
        $cloneID++;
        var $sectionClone = $section.clone(true);
        $sectionClone.find("*[id]").andSelf().each(function () {
            $(this).attr("id", $(this).attr("id") + $cloneID);
        });
        $('#facility_section_info').append($sectionClone);

    });
});

Upvotes: 1

Related Questions