如何使用 javascript 删除表的 tr？答案

【问题标题】：How can i remove an table's tr with javascript?如何使用 javascript 删除表的 tr？
【发布时间】：2022-01-13 20:48:03
【问题描述】：

首先，这里是超级初学者。我正在尝试做一个待办事项清单。添加部分工作正常，如下所示：

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>

如何创建一个函数来删除最后添加的项目？

【问题讨论】：

您不能将文本直接放在tr 中，您需要有td 或th 子级。你可以在里面放文字。
我已经更正了标记错误并回答了您的问题，并解释了 removeLastItem() 函数的工作原理。请检查一下。
虽然我知道您喜欢您选择作为答案的解决方案，但这也是一个不幸的选择，因为它不能满足您的问题要求：我如何创建一个函数删除最后添加的项目？您选择的答案不是一个好的选择的第二个原因是它没有解决我在答案中解释和修复的无效 HTML 问题。

标签： javascript html

【解决方案1】：

首先，我们需要为您的表格使用正确的标记。 tr 必须是 thead 或 tbody 的子级。其次，您不能将文本节点作为tr 的子节点；这些必须放在td 或th 元素中。使用非英文变量名也是不好的做法，我已将其更改为英文。

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

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 选择器。 ? 是 safe navigator/optional chaining，可确保在您的表中没有项目时有人单击删除按钮时您的代码不会引发错误。

【讨论】：

当我使用查询选择器时，我会像在 CSS 中一样选择东西？
是的，我还在解释中链接了文档。
newRow.innerHTML = <td>${item}</d>;.怎么样，你创建了一个表格的 td 的 HTML？为什么是 ${item}？

【解决方案2】：

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

使用最后一个子属性

【讨论】：

【解决方案3】：

您可以在 tr 内添加按钮，而不是使用删除按钮，按下它可以为您删除该 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);
}

【讨论】：

如何使按钮添加到新添加的 tr 的右侧？像一个新的表格列
这并不能解决无效的 HTML 问题。您不得将文本节点添加到 tr。

【解决方案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, siis see kustub！

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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)
}

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

【讨论】：