如何使用 js 删除 table 中的特定行

Question

我正在学习 javascript 我制作了这个简单的页面，您可以在其中添加您的标题和作者。通过点击 add 按钮，输入被输入到 table 那里你有删除按钮。我如何在 javascript 中实现 function remove(){} 从调用它的地方删除 table 的行，因为我尝试使用 output.lastElement.remove(); 但这只会删除最后一行而不是单击按钮所在的行。如果你知道我该怎么做，请给我一个答案 ty :)。

 var title = document.getElementById("title");
        var author = document.getElementById("author");
        var output = document.getElementById("output");
        function addToTable(){
            output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" + 
            "<td>" + author.value + "</td>" + 
            "<td>" + "<input type='button' onclick='remove();' id='remove'value ='Remove'>"+ "</td>"  + "</tr>"
        }
        function remove(){

        }

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

  

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        
    </head>
    
    <body>
        <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>
        <div>
            <input type="button" value="Add" onclick="addToTable();">
        </div>
        <div>
            <table id="output">
                <th style="width:45%;">Title</th>
                <th style="width:45%;">Author</th>
                <th style="width:10%;">Button</th>
            </table>
        </div>
    </body>
    </html>

Answer 1

只需将 this 作为参数传递给 remove 函数，然后在父级上调用 removeChild。

 var title = document.getElementById("title");
        var author = document.getElementById("author");
        var output = document.getElementById("output");
        function addToTable(){
            output.innerHTML += "<tr>" + "<td>" + title.value + "</td>" + 
            "<td>" + author.value + "</td>" + 
            "<td>" + "<input type='button' onclick='remove(this);' id='remove'value ='Remove'>"+ "</td>"  + "</tr>"
        }
        function remove(btn){
            var row = btn.parentNode;
            row.parentNode.removeChild(row);
        }

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

  

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        
    </head>
    
    <body>
        <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>
        <div>
            <input type="button" value="Add" onclick="addToTable();">
        </div>
        <div>
            <table id="output">
                <th style="width:45%;">Title</th>
                <th style="width:45%;">Author</th>
                <th style="width:10%;">Button</th>
            </table>
        </div>
    </body>
    </html>

Answer 2

一个使用事件委托的例子。

function addToTable() {
    const title = document.getElementById("title");
    const author = document.getElementById("author");
    const output = document.getElementById("output");

    output.innerHTML +=
        "<tr>" +
        "<td>" +
        title.value +
        "</td>" +
        "<td>" +
        author.value +
        "</td>" +
        "<td>" +
        "<button type='button'>remove</button>" +
        "</td>" +
        "</tr>";
}

function removeRow(e) {
    if (e.target.tagName === "BUTTON") {
        e.target.closest("tr").remove();
    }
}

document.querySelector("#output").addEventListener("click", removeRow);

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        
    </head>
    
    <body>
        <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>
        <div>
            <input type="button" value="Add" onclick="addToTable();">
        </div>
        <div>
            <table id="output">
                <th style="width:45%;">Title</th>
                <th style="width:45%;">Author</th>
                <th style="width:10%;">Button</th>
            </table>
        </div>
    </body>
    </html>

Answer 3

使用现代 javascript 语法：

const title = document.getElementById("title");
const author = document.getElementById("author");
const output = document.getElementById("output");

const addToTable = () => {
  const dataId = `table-row-${new Date().getTime()}`;
  output.innerHTML += `
    <tr data-row-id="${dataId}">
      <td>${title.value}</td> 
      <td>${author.value}</td> 
      <td>
        <input type="button" onclick="remove('${dataId}')" value="Remove">
      </td>
    </tr>`;
}

const remove = (dataRowID) => {
  output.querySelector(`[data-row-id="${dataRowID}"]`).remove();
}

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

  </head>

  <body>
    <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>
    <div>
      <input type="button" value="Add" onclick="addToTable();">
    </div>
    <div>
      <table id="output">
        <th style="width:45%;">Title</th>
        <th style="width:45%;">Author</th>
        <th style="width:10%;">Button</th>
      </table>
    </div>
  </body>
</html>

我建议你不要完全使用旧的 javascript 语法。

如何使用 js 删除 table 中的特定行

How to remove specific row in table using js

html

javascript

removechild