我如何刪除表格動態行？

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();