JavaScript удалить динамически созданный тр

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. Вы передаете имя тега и ожидаете, что он вернет список.

Если ваша цель состоит в том, чтобы удалить последний tr элемент в любом месте на странице, вы можете использовать вместо querySelectorAll:

function RemoveData() { 

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

querySelectorAll работ по all modern browsers, and IE8.

---

Я добавил var к last линии, потому что ваш код был жертвой The Horror of Implicit Globals без него.

---

Re ваш комментарий ниже:

Как бы удалить выбранный элемент ...

Я бы, наверное, один обработчик событий на столе, а затем вызвать удаление основанный на цели события (например, делегированная обработка). Это выглядит примерно так:

"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. Если вам необходимо поддерживать старые браузеры, вы можете использовать функцию hookEvent в this other answer.

Answer 2

Я предпочитаю функцию JQuery .closest(), чтобы удалить выбранную строку, так что вам не нужно работать с Роу-ID ... потому, что автор имеет уже 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>

Привет из Вены