How to remove specific row in table using js

Question

I am learning javascript and i made this simple page where you add your title and author. By clicking on add button the input is entered to table where you have remove button. How can i implement a function remove(){} in javascript that removed the row of the table from where it was called, because i tried using output.lastElement.remove(); but that only removes the last row not the row from where the button is clicked. If you know how can i make this please give me an answer 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>

Vitaliy Rayets · Answer 1 · 2022-02-16T10:23:34.590

Just throw this to remove function as parametr and then call removeChild on parent.

 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>

It's works thanks to `removeChild()` which removes a child node from the DOM — Vitaliy Rayets, Feb 16 '22 at 10:27

score 1 · Answer 2 · answered Feb 16 '22 at 10:45

Using modern javascript syntax:

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>

I advise you not to completely use old javascript syntax.

score 0 · Accepted Answer · answered Feb 16 '22 at 10:20

An example using event delegation.

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>

That way you will fire the event every time someone clicks on `#output` which is a bad approach for optimization purposes. — Alessandro Foolish Ciak DAnton, Feb 16 '22 at 11:02
@AlessandroFoolishCiakDAnton, You may have a look of [Why is JavaScript event delegation better than attaching events to each element?](https://gomakethings.com/why-is-javascript-event-delegation-better-than-attaching-events-to-each-element/#:~:text=If%20you%27re%20only%20listening,d%20recommend%20using%20event%20delegation.) — ikhvjs, Feb 16 '22 at 11:38
@AlessandroFoolishCiakDAnton, As you seems familiar with `reactjs`, `reactjs` is actually use one top level event listener for all the event in the virtual dom. https://www.the-guild.dev/blog/react-dom-event-handling-system — ikhvjs, Feb 16 '22 at 11:41
of course but that is not reactjs, it is pure javascript and we all need to pay attention to code optimization. — Alessandro Foolish Ciak DAnton, Feb 18 '22 at 08:56
@AlessandroFoolishCiakDAnton, For the code optimization perspective, event delegation is better than attaching each event to each element. If you add 100 rows to the page, you attach 100 event listeners to the page. That will slow the page a lot. Reactjs is just an example to show how they achieve the performance boost by using one top level event listener for all the events. — ikhvjs, Feb 18 '22 at 09:01
@AlessandroFoolishCiakDAnton, There is a related SO question. [Event delegation vs direct binding when adding complex elements to a page](https://stackoverflow.com/a/34464479/14032355) — ikhvjs, Feb 18 '22 at 09:23

How to remove specific row in table using js

3 Answers3