How I remove table dynamic row?

Question

I'm following code from jquery append and remove dynamic table row (http://jsfiddle.net/samliew/3AJcj/2/)

I already organized my table. But remove function didn't work, how I change this code? I can't understand about $(this).parent().parent().remove(); code.

$(document).ready(function(){
 $(".addCF").click(function(){
  $("#addTg").after('<tr><td class="tg-yw4l" ><input type="text"></td><td class="tg-yw4l" colspan="2" ><input type="text"></td><td class="tg-yw4l" ><input type="text"></td><td><a href="javascript:void(0);" class="remCF" >Remove</a></td></tr>');
 });
     $("#addTg").on('click','.remCF',function(){
         $(this).parent().parent().remove();
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tg">
   <tr>
    <td class="tg-mtwr">DATE</td>
    <td class="tg-mtwr" colspan="2" >CONTENTS</td>
    <td class="tg-mtwr">PRICE</td>
    <td class="tg-mtwr">BUTTON</td>
  </tr>
  <tr id="addTg">
    <td class="tg-yw4l" ><input type="text"></td>
    <td class="tg-yw4l" colspan="2" ><input type="text"></td>
    <td class="tg-yw4l" ><input type="text"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr> 
    <td colspan="5" style="border:0px solid #fff;">
   
    </td>
  </tr>
</table>
<button onclick="myFunction()" class="addCF" >Add</button>

Pranav C Balan · Accepted Answer · 2016-08-13T20:46:53.510

Dynamically added elements are not inside the #addTg which is the sibling of the element. So change the selector wth the parent table class selector.

Inside the handler this refers to the clicked dom object and parent() method is using to get the parent of the element. You can simplify it using closest() method which retrieves the element by traversing up through its ancestors.

Although myFunction is not defined in your code so remove onclick="myFunction()" from the button which is not necessary here.

$(document).ready(function() {
  $(".addCF").click(function() {
    $("#addTg").after('<tr><td class="tg-yw4l" ><input type="text"></td><td class="tg-yw4l" colspan="2" ><input type="text"></td><td class="tg-yw4l" ><input type="text"></td><td><a href="javascript:void(0);" class="remCF" >Remove</a></td></tr>');
  });
  $(".tg").on('click', '.remCF', function() {
    $(this).closest('tr').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tg">
  <tr>
    <td class="tg-mtwr">DATE</td>
    <td class="tg-mtwr" colspan="2">CONTENTS</td>
    <td class="tg-mtwr">PRICE</td>
    <td class="tg-mtwr">BUTTON</td>
  </tr>
  <tr id="addTg">
    <td class="tg-yw4l">
      <input type="text">
    </td>
    <td class="tg-yw4l" colspan="2">
      <input type="text">
    </td>
    <td class="tg-yw4l">
      <input type="text">
    </td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td colspan="5" style="border:0px solid #fff;">

    </td>
  </tr>
</table>
<button class="addCF">Add</button>

@user2458645 :glad to help :) – Pranav C Balan Aug 14 '16 at 09:01 — Pranav C Balan, Aug 14 '16 at 09:01

Vicente Olivert Riera · Answer 2 · 2016-08-13T21:13:12.443

It looks like you would like to remove the row when the "Remove" link gets clicked. That link looks like this:

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

So one could think the function you already have for removing the row should be triggered whenever an element with the class remCF is clicked:

$(".remCF").on('click', function() {
    $(this).parent().parent().remove();
});

However that wouldn't work because you create those links dynamically, so you would be binding a click event to something that not yet exists.

Instead of that, I would create the links with an onclick property that calls a function to delete the row.

$(document).ready(function(){
  $(".addCF").click(function() {
    $("#addTg").after('<tr><td class="tg-yw4l" ><input type="text"></td><td class="tg-yw4l" colspan="2" ><input type="text"></td><td class="tg-yw4l" ><input type="text"></td><td><a href="javascript:void(0);" onclick="deleteRow($(this));" class="remCF" >Remove</a></td></tr>');
  });
});

function deleteRow(elem) {
    elem.parent().parent().remove();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="tg">
   <tr>
    <td class="tg-mtwr">DATE</td>
    <td class="tg-mtwr" colspan="2" >CONTENTS</td>
    <td class="tg-mtwr">PRICE</td>
    <td class="tg-mtwr">BUTTON</td>
  </tr>
  <tr id="addTg">
    <td class="tg-yw4l" ><input type="text"></td>
    <td class="tg-yw4l" colspan="2" ><input type="text"></td>
    <td class="tg-yw4l" ><input type="text"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr> 
    <td colspan="5" style="border:0px solid #fff;">
   
    </td>
  </tr>
</table>
<button class="addCF" >Add</button>

That way, when you click the "Remove" link it will call that function, and that function will do the following:

It will take the element passed as an argument to the function: $(this)
Then it will take it's parent: the cell where it's contained (<td>)
Then it will take the parent of that cell: the row where it's contained: (<tr>)
It will remove that element (the row)

Those 4 steps is what elem.parent().parent().remove(); means.

And a shorter approach to do the same would be:

elem.closest('tr').remove();

How I remove table dynamic row?

2 Answers2

Linked