如何删除表格动态行? [英] How I remove table dynamic row?

问题描述

我正在关注以下代码 jquery追加和删除动态表行( http://jsfiddle.net/samliew/3AJcj/2/)

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

我已经整理好桌子了.但是删除功能不起作用，如何更改此代码?我不了解 $(this).parent().parent().remove(); 代码.

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>

推荐答案

动态添加的元素不在 #addTg 内，后者是该元素的同级元素.因此，请通过父表类选择器更改选择器.

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.

在处理程序内 this 指的是单击的dom对象，并且 parent() 方法用于获取元素的父级.您可以使用 closest() 通过遍历其祖先来检索元素的方法.

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.

尽管您的代码中未定义 myFunction ，所以请从此处删除按钮中的 onclick ="myFunction()" 不必要.

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>

这篇关于如何删除表格动态行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！