无法删除表的 tr 元素。.JS

Question

我具有动态添加/删除输入的功能。添加操作正常，但删除操作不起作用。我找到了这个功能的jQuery实现，并尝试将其转换为纯JS。这就是删除的实现方式(我在jQuery上测试了它，它在上面工作(。

$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});

var i = '2';
document.getElementById('addRow').addEventListener('click', function () {
var html = '';
html += '<tr id="inputFormRow">';
html += '<td id="prevdel">'+i+'</td>';
html += '<td>';
html += '<input type="text" name="position_name[]" placeholder="Enter new position">';
html += '</td>';
html += '<td>';
html += '<div class="input-group-append ml-3">';
html += '<button id="removeRow" type="button" class="btn btn-danger">Delete</button>';
html += '</div>';
html += '</td>';
html += '</tr>';
//
i++;
// document.getElementById('newRow').append(html);
document.getElementById('newRow').insertAdjacentHTML('beforebegin', html);
});
// remove row
document.getElementById('removeRow').addEventListener('click', function (e){
e.preventDefault();
document.getElementById('prevdel').previousSibling.remove();
});
//

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
<table class="table table-success table-striped w-75 text-center">
<tbody>
<tr>
<div id="inputFormRow">
<td>1
</td>
<td>
<input type="text" name="position_name[]" value="Some data">
</td>
<td>
<div class="input-group-append ml-3">
<button id="removeRow" type="button" class="btn btn-danger">Delete</button>
</div>
</td>
</div>
</tr>
<tr id="newRow"></tr>
<tr>
<td colspan="3">
<button id="addRow" type="button" class="btn btn-info">Add field</button>
</td>
</tr>
</tbody>
</table>
</form>

Answer 1

jQuery版本使用事件委派来说明运行时不存在的元素

您可以通过将事件侦听器添加到表中并检查event target来完成同样的操作

document.querySelector('.table').addEventListener('click', function (e){
if(e.target.matches('button.removeRow')){
e.target.closest('tr').remove()
}      
});

工作版本-注意，我将两个删除按钮id更改为类

var i = '2';
document.getElementById('addRow').addEventListener('click', function () {
var html = '';
html += '<tr id="inputFormRow">';
html += '<td id="prevdel">'+i+'</td>';
html += '<td>';
html += '<input type="text" name="position_name[]" placeholder="Enter new position">';
html += '</td>';
html += '<td>';
html += '<div class="input-group-append ml-3">';
html += '<button  type="button" class="removeRow btn btn-danger">Delete</button>';
html += '</div>';
html += '</td>';
html += '</tr>';
//
i++;
// document.getElementById('newRow').append(html);
document.getElementById('newRow').insertAdjacentHTML('beforebegin', html);
});
// remove row
document.querySelector('.table').addEventListener('click', function (e){
if(e.target.matches('button.removeRow')){
e.target.closest('tr').remove()
}

});
//

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
<table class="table table-success table-striped w-75 text-center">
<tbody>
<tr>
<div id="inputFormRow">
<td>1
</td>
<td>
<input type="text" name="position_name[]" value="Some data">
</td>
<td>
<div class="input-group-append ml-3">
<button  type="button" class="removeRow btn btn-danger">Delete</button>
</div>
</td>
</div>
</tr>
<tr id="newRow"></tr>
<tr>
<td colspan="3">
<button id="addRow" type="button" class="btn btn-info">Add field</button>
</td>
</tr>
</tbody>
</table>
</form>