如何使用 javascript 删除表的 tr？

Question

首先，这里是超级初学者。我正在做一份待办事项清单。添加部分工作正常，看起来像这样：

let salvar = document.getElementById("salvar")
let remove = document.getElementById("remover")

salvar.onclick = saveitem
function saveitem() {
let item = document.getElementById("input").value
let novoitem = document.createElement("tr")
let lista = document.getElementById("todoitems")
novoitem.innerText = item
lista.appendChild(novoitem)
}

<input type="text" id="input">
<div class="container">
<button id="salvar">Save</button>
<button id="remover">Remove</button>
</div>
<table id="todoitems">
<tr>
<th>Tarefa</th>
</tr>
</table>

如何创建删除最后添加的项的函数？

Answer 1

首先，我们需要为表使用正确的标记。tr必须是thead或tbody的子级。其次，不能将文本节点作为tr的子节点；这些必须被放置在CCD_ 5或CCD_。另外，使用非英语的变量名也是不好的做法，我已经把它改成了英语。

话虽如此，以下是您的解决方案：

let add = document.getElementById("add")
let remove = document.getElementById("remove")
remove.onclick = removeLastItem;
add.onclick = saveitem;
function saveitem() {
let item = document.getElementById("input").value;
let newRow = document.createElement("tr");
let list = document.getElementById("todoitems");
newRow.innerHTML = `<td>${item}</d>`;
list.appendChild(newRow);
}
function removeLastItem() {
document.querySelector('#todoitems tr:last-child')?.remove();
}

<input type="text" id="input">
<div class="container">
<button id="add">Save</button>
<button id="remove">Remove</button>
</div>
<table>
<thead>
<tr>
<th>Tarefa</th>
</tr>
</thead>
<tbody id="todoitems"></tbody>
</table>

removeLastItem()功能说明：

document.querySelector('#todoitems tr:last-child')?.remove()

querySelector允许您传入一个CSS选择器，它的工作方式与CSS中的一样。要选择tbody#todoitems中的最后一个tr，请使用#todoitems tr:last-child作为CSS选择器。?是一个安全的导航器/可选链接，它可以确保当表中没有项目时，如果有人单击删除按钮，代码不会抛出错误。

Answer 2

document.getElementById('todoitems').lastChild.remove()

使用最后一个子属性

Answer 3

您可以在tr中添加按钮，而不是使用删除按钮，当按下时，它可以为您删除

function saveitem(){
let item = document.getElementById("input").value
let novoitem = document.createElement("tr")
let delBtn = document.createElement("button")
delBtn.innerText = "del"
delBtn.addEventListener("click",function(){
novoitem.remove();
})
let lista = document.getElementById("todoitems")
novoitem.innerText = item
lista.appendChild(novoitem)
novoitem.append(delBtn);
}

Answer 4

let salvar = document.getElementById("salvar");
let remove = document.getElementById("remover");

salvar.onclick = saveitem;
remove.onclick = removeitem;
function saveitem(){
let item = document.getElementById("input").value;
let novoitem = document.createElement("tr");
let lista = document.getElementById("todoitems");
novoitem.innerText = item;
novoitem.onclick = function() {this.remove();};
lista.appendChild(novoitem);
}
function removeitem() {
document.getElementById("todoitems").lastChild.remove();
}

<input type="text" id="input">
<div class="container">
<button id="salvar">Save</button>
<button id="remover">Remove last</button>
</div>
<table id="todoitems">
<tr onclick="this.remove();">
<th>Tarefa</th>
</tr>
</table>

你想要这个吗kui klõpsate tr ile，我看到了kustub！

Answer 5

var allElm = document.getElementById("todoitems").getElementsByTagName("tr");
allElm[allElm.length-1].remove();

Answer 6

您可以做的是在js代码中使用this传递id，然后单击调用函数。通过这种方式，您可以从列表中删除任何项目，而不是最后添加的项目。以下是我用jsfiddle为您编写的示例代码：

<input type="text" id="input">
<div class="container">
<button id="salvar">Save</button>
<button id="remover">Remove</button>
</div>
<table id="todoitems">
<tr>
<th>Tarefa</th>
</tr>
</table>

JS代码：

let salvar = document.getElementById("salvar")
let remove = document.getElementById("remover")

salvar.onclick = saveitem
function removeItem(item){
item.remove();
}
function saveitem() {
let item = document.getElementById("input").value
let novoitem = document.createElement("tr")
let lista = document.getElementById("todoitems")
novoitem.setAttribute('id',item);
novoitem.setAttribute('onClick','removeItem(this)');
novoitem.innerText = item
lista.appendChild(novoitem)
}

这将删除您在列表中单击的项目。