从不工作的表中删除行的函数

Question

我有一个关于我的函数删除(btn)的问题。我不太明白为什么它不起作用。这个功能有一个按钮，当我点击它，它应该添加到删除表和增加计数器，同时减少计数器从主表和从那里删除行。下面是我的代码:

var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");
function addToTable() {
var radio = document.getElementsByName("content");
var radio_selected;
for (var a = 0; a < radio.length; a++) {
if (radio[a].checked) {
radio_selected = radio[a].value;
}
}
output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" +
"<td>" + author.value + "</td>" +
"<td>" + radio_selected + "</td>" +
"<td>" + "<input type='button' onclick='post(this);' value ='Post'>" +
"<input type='button' onclick='remove(this);' value ='Remove'>" + "</td>" + "</tr>"
}
function counter() {
var brojac = document.getElementById("counterForElements");
brojac.innerHTML = parseInt(brojac.innerHTML) + 1;
}
function remove(btn) {
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
removed.append(row);
row.parentNode.removeChild(row);
var brojac = document.getElementById("counterForElements"); //counter
brojac.innerHTML = parseInt(brojac.innerHTML) - 1; //counter
}
function post(btn) {
var row = btn.parentNode;
row.parentNode.style.backgroundColor = "Green";
btn.setAttribute("disabled", "true");
btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}

label {
width: 100px;
display: inline-block;
}
table,
th,
td,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
table td {
text-align: center;
}

<div>
<div>
<label for="Title">Title</label>
<input type="text" id="title">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="author">
</div>
<div>
<label for="content" id="contentlabel">Content type</label>
<input type="radio" name="content" value="Free" class="content">Free
<input type="radio" name="content" value="Paid" class="content">Paid
</div>
</div>
<div>
<input type="button" value="Add" onclick="addToTable(); counter();">
</div>
<div>
<table>
<thead>
<th style="width:40%;">Title</th>
<th style="width:40%;">Author</th>
<th style="width:10%;">Type</th>
<th style="width:10%;">Button</th>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
<div>
<h1>Number of elements: <span id="counterForElements">0</span></h1>
<h1>Removed elements</h1>
<table id="removed">
</table>
</div>

Answer 1

您的追加正在移动行，这意味着这将删除行，无论它在哪个表中:row.parentNode.removeChild(row);

我强烈建议计算实际行数

委派(eventListener在tbody上)使代码更简单，并允许我们删除内联事件处理程序。

最后是保存数据的数组和渲染数据的映射

const titleField = document.getElementById("title");
const authorField = document.getElementById("author");
const output = document.getElementById("output");
const add = document.getElementById("add");
const brojac = document.getElementById("counterForElements");
const removed = document.getElementById("removed");
const arr = [];
const counter = () => brojac.textContent = output.querySelectorAll("tr").length;
const render = () => output.innerHTML = arr
.map(({ title, author, paymentType },i) => `<tr data-idx="${i}">
<td>${title}</td>   
<td>${author}</td>
<td>${paymentType}</td>
<td><input type="button" class="post" value="Post" />
<input type="button" class="remove" value="Remove"></td>
</tr>`).join("");

const addToTable = () => {
const paymentType = document.querySelector("[name=content]:checked")?.value ?? "";
const author = authorField.value
const title = titleField.value
arr.push({ author, title, paymentType })
render()
counter();
};
output.addEventListener("click", e => {
const tgt = e.target;
if (tgt.matches(".remove")) {
const row = tgt.closest("tr");
arr.splice(+row.dataset.idx,1); // removing the element from the array at index    
removed.append(row);
counter(); // count what's left
} else if (tgt.matches(".post")) {
var row = tgt.closest("tr");
row.style.backgroundColor = "Green";
tgt.setAttribute("disabled", "true");
tgt.nextElementSibling.setAttribute("disabled", "true");
}
})
add.addEventListener("click", addToTable)

label {
width: 100px;
display: inline-block;
}
table,
th,
td,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
table td {
text-align: center;
}

<div>
<div>
<label for="Title">Title</label>
<input type="text" id="title">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="author">
</div>
<div>
<label for="content" id="contentlabel">Content type</label>
<input type="radio" name="content" value="Free" class="content">Free
<input type="radio" name="content" value="Paid" class="content">Paid
</div>
</div>
<div>
<input type="button" value="Add" id="add" />
</div>
<div>
<table>
<thead>
<th style="width:40%;">Title</th>
<th style="width:40%;">Author</th>
<th style="width:10%;">Type</th>
<th style="width:10%;">Button</th>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
<div>
<h1>Number of elements: <span id="counterForElements">0</span></h1>
<h1>Removed elements</h1>
<table id="removed">
</table>
</div>

Answer 2

我发现了错误，只需将您的代码替换为:

function remove(btn) {
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
removed.append(row);
var brojac = document.getElementById("counterForElements");//counter
brojac.innerHTML = parseInt(brojac.innerHTML) - 1;//counter
}

我删除了这个语句:row.parentNode.removeChild(row);.

Answer 3

如果您想为添加的项目设置计数器&被删除的项目，你可以试试——为被删除的项目添加一个额外的span，这样你就可以看到数字

HTML

<h1>Number of elements: <span id="counterForElements">0</span></h1>
<h1>Removed elements: <span id="counterForElements1">0</span></h1>

和

JS

function remove(btn){
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
removed.append(row); 
row.parentNode.removeChild(row);
var brojac = document.getElementById("counterForElements");
var brojac1 = document.getElementById("counterForElements1");//counter
brojac1.innerHTML = parseInt(brojac1.innerHTML) - 1;//counter
brojac.innerHTML = parseInt(brojac.innerHTML) - 1;
}

我想这些就是我所做的所有更改，你可以看到你的代码在这些更改后的样子-

codepen

这只是一个示例id名称，您可以使用任何您喜欢的
和-这完全取决于您的最终目标是什么。