我如何删除表格动态行？

Question

我从以下 jquery append and remove dynamic table row （http://jsfiddle.net/samliew/3AJcj/2/）代码

我已经组织了我的表。 但删除功能不起作用，我如何更改此代码？ 我不明白$(this).parent().parent().remove();的代码。

$(document).ready(function(){ 
 
\t $(".addCF").click(function(){ 
 
\t \t $("#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>'); 
 
\t }); 
 
\t  $("#addTg").on('click','.remCF',function(){ 
 
\t   $(this).parent().parent().remove(); 
 
\t  }); 
 
});

<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>

Answer 1

动态添加元素不是#addTg这是元素的同级内部。因此，改变父表类选择器的选择器。

处理程序this里面指的是点击的DOM对象和parent()方法是使用来获取元素的父元素。您可以使用closest()方法简化它，通过遍历其祖先来检索元素。

虽然myFunction没有在您的代码中定义，所以从按钮中删除onclick="myFunction()"这是不必要的。

$(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>

Answer 2

它看起来像你想删除该行的“删除”链接被点击的时候。这种联系是这样的：

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

所以人们会想到你已经去除该行的功能应该被触发点击与类remCF一个元素时：

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

但是，这种止跌”因为你动态地创建了这些链接，所以你会将一个事件绑定到一个还不存在的东西上。

取而代之的是，我会创建一个onclick属性的链接，该属性调用一个函数来删除该行。

$(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>

这样，当您单击“删除”链接，它会调用该函数，并且该函数将做到以下几点：

1. 将采取元素传递作为函数的参数：$（this）
2. 然后，它将采取它的父级：它包含的单元格（<td>）
3. 然后，它会采取细胞的父：其中它包含的行：（<tr>）
4. 它将删除该元素（行）

那些4个步骤是什么elem.parent().parent().remove();手段。

和较短的方式做同样的将是：

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