從表中刪除行的功能不起作用

Question

我對我的函數 remove(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);

我強烈建議計算實際行數

此外，委托（tbody 上的 eventListener）使代碼更簡單，並允許我們刪除內聯事件處理程序。

最后是一個數組來保存數據和一個地圖來渲染它

 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

如果您想為添加的項目和已刪除的項目設置計數器，您可以嘗試以下方法 - 為已刪除的項目添加一個額外的跨度，以便您查看數量

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

我認為這些都是我所做的所有更改，您可以在此處查看這些更改后您的代碼是什么樣的 -

密碼筆

這只是一個示例 id 名稱，您可以使用任何您喜歡的名稱
和 - 這一切都取決於你的最終目標是什么。