Pertama-tama, super pemula di sini. Saya mencoba membuat daftar tugas. Bagian add berfungsi dengan baik, terlihat seperti ini:

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>

Bagaimana saya bisa membuat fungsi yang menghapus item yang terakhir ditambahkan?

0
José Carlos 13 Januari 2022, 14:52
2
Anda tidak dapat menempatkan teks secara langsung dalam tr, Anda harus memiliki td atau th turunan. Di sana Anda dapat meletakkan teks di dalamnya.
 – 
connexo
13 Januari 2022, 14:58
Saya telah memperbaiki kesalahan markup serta menjawab pertanyaan Anda, beserta penjelasan tentang cara kerja fungsi removeLastItem(). Silakan periksa.
 – 
connexo
13 Januari 2022, 15:12

7 jawaban

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

Gunakan properti anak terakhir

1
Jatin kabariya 13 Januari 2022, 15:07

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.

1
connexo 13 Januari 2022, 15:15

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);
}
1
gulam ahmad siddique 13 Januari 2022, 15:20
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!

0
Piuksu 13 Januari 2022, 15:08
var allElm = document.getElementById("todoitems").getElementsByTagName("tr");
allElm[allElm.length-1].remove();
0
TobyLoby 13 Januari 2022, 15:13

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.

0
Hassaan Ali 13 Januari 2022, 15:48

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

-1
Sajjad Sky 13 Januari 2022, 15:08
1
Pertanyaan ini tidak ditandai jQuery, dan itu juga sama sekali tidak perlu di sini. Juga tidak ada id yang diperlukan pada baris tabel.
 – 
connexo
13 Januari 2022, 15:06