Bagaimana saya bisa menghapus tr tabel dengan javascript?

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

Gunakan properti anak terakhir

Pertama-tama kita perlu menggunakan markup yang benar untuk tabel Anda. tr harus merupakan turunan dari thead atau tbody. Kedua, Anda tidak dapat memiliki simpul teks sebagai anak dari tr; ini harus ditempatkan di elemen td atau th. Juga merupakan praktik yang buruk untuk menggunakan nama variabel non-Inggris, saya telah mengubahnya menjadi bahasa Inggris.

Karena itu, inilah solusi Anda:

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>

Penjelasan fungsi removeLastItem():

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

querySelector memungkinkan Anda untuk memasukkan pemilih CSS yang berfungsi seperti halnya di CSS. Untuk memilih tr terakhir di tbody#todoitems Anda menggunakan #todoitems tr:last-child sebagai pemilih CSS Anda. ? adalah navigator aman/opsional chaining yang memastikan kode Anda tidak menimbulkan kesalahan jika seseorang mengklik tombol hapus saat tidak ada item di tabel Anda.

Alih-alih menggunakan tombol hapus, Anda dapat menambahkan tombol di dalam tr dan ketika ditekan itu dapat menghapus tr itu untuk Anda

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

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>

Apakah Anda menginginkan kui klõpsate tr-ile ini, siis lihat kustub!

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

Yang dapat Anda lakukan adalah meneruskan id menggunakan this dalam kode js dan kemudian memanggil fungsi saat klik. Dengan cara ini Anda dapat menghapus item apa pun dari daftar dan bukan item terakhir yang ditambahkan. Berikut contoh kode yang saya tulis untuk Anda dengan 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>

Kode 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)
}

Ini akan menghapus item yang Anda klik pada daftar.

Pertama-tama Anda perlu mengatur atribut untuk tr Anda seperti:

<tr id="yourid"><td>Hi</td></tr>

Maka Anda dapat dengan mudah menghapusnya dari tabel Anda dengan kode javascript sederhana seperti:

document.getElementById("yourid").remove();

Anda juga dapat mengunjungi halaman ini, ini akan membantu Anda:

Tambah/hapus baris dari tabel