How to remove specific row in table using js

February 16, 2022

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>

>Solution :

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>