如何使用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

的子节点；这些必须放置在

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}</td>`;
  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 中一样。要选择

tr

中的最后一个

tbody#todoitems

，请使用

#todoitems tr:last-child

作为 CSS 选择器。

?

是安全导航器/可选链接，可确保如果有人在表中没有项目时单击删除按钮，您的代码不会引发错误。

Answer 2

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

使用最后一个子属性

Answer 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);
}

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，siis see 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)
}

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