如何使用javascript洗掉表的tr？

首先，這里是超級初學者。我正在嘗試做一個待辦事項清單。添加部分作業正常，它看起來像這樣：

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>

如何創建洗掉最后添加的專案的功能？

uj5u.com熱心網友回復：

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

使用最后一個子屬性

uj5u.com熱心網友回復：

首先，我們需要為您的表格使用正確的標記。tr必須是thead或的孩子tbody。其次，您不能將文本節點作為tr; 的子節點。這些必須放在tdorth元素中。使用非英文變數名也是不好的做法，我已將其更改為英文。

話雖如此，這是您的解決方案：

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 中一樣。要選擇最后tr在 tbody#todoitems你使用#todoitems tr:last-child為你的CSS選擇器。這?是安全導航器/可選鏈接，可確保在您的表中沒有專案時有人單擊洗掉按鈕時您的代碼不會引發錯誤。

uj5u.com熱心網友回復：

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，請看 kustub！

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您可以在 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);
}

uj5u.com熱心網友回復：

首先，您需要為您的 tr 設定一個屬性，例如：

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

然后您可以使用簡單的 javascript 代碼輕松地將它們從表中洗掉，例如：

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

您也可以訪問此頁面，它將對您有所幫助：

從表中添加/洗掉行

標籤：

上一篇：在js中轉換物件

下一篇：網路服務埠定義的正則運算式