的JavaScript移除動態創建的TR

Question

我有一個js的功能，增加了一個tr到table：

function AddData() { 

    var rows = ""; 

    var product_id = $('input[name="product_name"]').val(); 

    var product_price = $('input[name="product_price"]').val(); 

    rows += "<td><input type='hidden' name='item_id[]' value='" + product_id + "'><p>" + name + "</p></td><td><input type='hidden' name='price[]' value='" + product_price + "' class='price'></td><td>&pound;<span id='amount' class='amount'>0</span></td><td><div class='btn btn-circle' onclick='RemoveData()' value='" + curtainid + "'>Delete</div></td>"; 
    var tbody = document.querySelector("#myTable tbody"); 
    var tr = document.createElement("tr"); 

    tr.innerHTML = rows; 
    tbody.appendChild(tr) 

    update_amounts();  
} 

內<td>是RemoveData()電話。我想要這個從表中刪除選定的tr。我曾嘗試使用：

function RemoveData() { 

    var elements = document.getElementById('tr'); 
    last = elements[elements.length-1]; 

    last.parentNode.removeChild(last); 

} 

但沒有成功。

Answer 1

getElementById得到一個單一的元素，其id。你正在傳遞一個標籤名稱並希望它返回一個列表。在all modern browsers, and IE8

function RemoveData() { 

    var elements = document.querySelectorAll('tr'); // <== Main change 
    var last = elements[elements.length-1];   // <== Note I added `var` 
    last.parentNode.removeChild(last); 
} 

querySelectorAll作品：

如果你的目標是在任何地方刪除頁面上的最後一個tr元素，你可以使用querySelectorAll代替。

---

我加var到last行，因爲你的代碼是墮入The Horror of Implicit Globals離不開它。

---

重新下方的評論：

我如何會刪除選定的元素...

我可能對錶中的單個事件處理程序，然後觸發去除基於事件的目標（例如委託處理）。這看起來是這樣的：

"use strict"; 
 

 
var tbody = document.getElementById("the-tbody"); 
 

 
// Add rows when the button is clicked 
 
document.getElementById("btn-add").addEventListener("click", addRow, false); 
 
function addRow(e) { 
 
    var row = document.createElement('tr'); 
 
    row.innerHTML = '<td>Hi there ' + 
 
     Math.floor(Math.random() * 1000) + 
 
     ' <span class="remove">[x]</span></td>'; 
 
    tbody.appendChild(row); 
 
} 
 

 
// Remove rows when their ".remove" span is clicked 
 
tbody.addEventListener("click", removeRow, false); 
 
function removeRow(e) { 
 
    var elm; 
 
    for (elm = e.target; elm !== this; elm = elm.parentNode) { 
 
    if (/\bremove\b/.test(elm.className)) { // On modern browsers you could use `classList` 
 
     // It's a remove link, remove its parent tr and we're done 
 
     removeElement(elm.parentNode); 
 
     e.stopPropagation(); 
 
     return; 
 
    } 
 
    } 
 
} 
 

 
function removeElement(elm) { 
 
    elm.parentNode.removeChild(elm); 
 
}

.remove { 
 
    cursor: pointer; 
 
}

<table> 
 
    <tbody id="the-tbody"></tbody> 
 
</table> 
 
<input type="button" id="btn-add" value="Add Row">

有我使用addEventListener。如果您需要支持舊瀏覽器，則可以使用this other answer中的hookEvent函數。

Answer 2

我喜歡jQuery的功能.closest()刪除選定的行，所以你不需要有行-ID的工作......因爲threadstarter早已jQuery的...試試這個：

$(document).ready(function(){ 
 
    $('button[name=deleteTR]').click(function(){ 
 
\t $(this).closest('tr').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 1</td></tr> 
 
    <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 2</td></tr> 
 
    <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 3</td></tr> 
 
    <tr><td><button type="button" name="deleteTR">Delete</button></td><td>Row 4</td></tr> 
 
</table>

從維也納