Cloning closest table row

Question

I recently asked this question

Since then I have discovered that what I wanted to do wont work. This is because the table is generated by a for loop, with their id incrementing each time. As such, I needed to amend things so that it would add rows for the table it is supposed too. I have updated my fiddle to show an example with two table JSFiddle

Essentially, I now do this

$(function() {
    $(".addCF").click(function(){
       var clone = $(this).closest('tr').clone(true).insertAfter($(this).closest('tr'));
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

I can get the name and label of the cloned rows done myself using the previous examples. My main problem is that I do not want to clone the whole row. At the moment, it is cloning this

<tr>
    <td><label class="subjectline" for="User1">User NOC M1</label></td>
    <td id="slLabel">SL_A</td>
    <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
    <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr> 

I need it to clone this but make the first td empty. Additionally, like the initial question, the last td should be a close button

<a href="javascript:void(0);" class="remCF">Remove</a>

Is it possible to do this?

Thanks

Answer 1

From the cloned tr ,

1. empty its first-child ( td ) 's content.
2. Set its last-child (td) 's html as the close element's html,

---

$(function() {
    $(".addCF").click(function(){
       var clone = $(this).closest('tr').clone(true);
       $("td:first-child", clone).empty();
       $("td:last-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
       clone.insertAfter( $(this).closest('tr'));
    });
    $("table.table").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

DEMO

Answer 2

You need to change your Cloned TR's html:

HTML:

<table id="customFields1" class="table table-bordered table-hover additionalMargin alignment">
    <thead>
    <tr>
        <th colspan="2"></th>
        <th>Some Title</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><label class="subjectline" for="User1">User NOC M1</label></td>
            <td id="slLabel">SL_A</td>
            <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
            <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
        </tr> 

    </tbody>
</table>

<table id="customFields2" class="table table-bordered table-hover additionalMargin alignment">
    <thead>
    <tr>
        <th colspan="2"></th>
        <th>Some Title</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td><label class="subjectline" for="User1">User NOC M1</label></td>
            <td id="slLabel">SL_A</td>
            <td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
            <td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
        </tr> 
    </tbody>
</table>

JQUERY:

$(function() {
    $(".addCF").click(function(){
       var closest_tr =$(this).closest('tr').clone(true); 
       closest_tr = $(closest_tr).find("td:first").html("").parent();
       var clone = closest_tr.insertAfter( $(this).closest('tr'));
    });
    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

DEMO: https://jsfiddle.net/116hvkhe/

Answer 3

is this something you were looking for: https://jsfiddle.net/8zwf9njr/13/

$(".addCF").click(function(){
    var clone = $(this).closest('tr').clone(true);
    clone.find('td:first-child').html('');
    clone.find('td:last-child').html('<a href="javascript:void(0);" class="remCF">Remove</a>');
    clone.insertAfter( $(this).closest('tr'));
});

you find the first td element of the clone and empty it. then you find the last td of the clone and you replace whatever is in it with your remove button.

ps. i think there's also a typo in your original remove click code: it should be $("#customFields1").on('click', instead of just #customFields . alternatively you can target both tables by using a more generic selector like table or add a class to the tables and use that.