Question

我正在关注代码 jquery append and remove dynamic table row （http://jsfiddle.net/samliew/3AJcj/2/）

我已经组织了我的桌子。但删除功能不起作用，我如何更改此代码？我无法理解$(this).parent().parent().remove();代码。

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

Answer 1

动态添加的元素不在#addTg内，而this是元素的兄弟。因此，使用父表类选择器更改选择器。

处理程序myFunction内部指的是单击的dom对象， parent() 方法用于获取元素的父级。您可以使用 closest() 方法对其进行简化，该方法通过遍历其祖先来检索元素。

虽然您的代码中未定义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(); }); });，此处不需要。

＆＃13;

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

＆＃13;

$_REQUEST not equal submitDraft or submitPublish then INSERT

＆＃13;

Answer 2

当点击“删除”链接时，您似乎想要删除该行。该链接如下所示：

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

因此，只要单击具有类remCF的元素，就可以认为已经有用于删除行的函数：

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

然而，由于您动态创建了这些链接，因此无法使用，因此您可以将click事件绑定到尚不存在的事件。

而不是那样，我会用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>

这样，当您单击“删除”链接时，它将调用该函数，该函数将执行以下操作：

将元素作为参数传递给函数：$（this）
然后它将把它的父母：包含它的单元格（<td>）
然后它会占用该单元格的父级：包含它的行：（<tr>）
它将删除该元素（行）

这4个步骤是elem.parent().parent().remove();的含义。

更简洁的做法是：

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

我如何删除表动态行？

2 个答案: