How to remove specific row in table using js-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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>