Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

392
Views
How can i remove an table's tr with javascript?

first of all, super beginner here. I'm trying to do a to do list. The add part works fine, it looks like this:

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>

How can i create a function that removes the last added item?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

First of all we need to use correct markup for your table. tr must be a child of either thead or tbody. Secondly, you cannot have text nodes as children of tr; these must be placed in td or th elements. Also it's bad practice to use non-English variable names, I've changed that to English.

That being said, here's your solution:

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>

Explanation of the removeLastItem() function:

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

querySelector allows you to pass in a CSS selector that works just like it does in CSS. To select the last tr in the tbody#todoitems you use #todoitems tr:last-child as your CSS selector. The ? is the safe navigator/optional chaining that makes sure your code doesn't throw an error if someone clicks the remove button when there are no items in your table.

about 4 years ago · Juan Pablo Isaza Report

0

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

use last child property

about 4 years ago · Juan Pablo Isaza Report

0

instead of using remove button you can add button inside tr and when pressed it can delete the that tr for you

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);
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!