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 · Accepted Answer · 2022-02-16 10:23:34Z

3

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>

edited Feb 16, 2022 at 10:23

answered Feb 16, 2022 at 10:16

Vitaliy Rayets

2,4041 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

itmemilan Over a year ago

can you explain how it works ?

Vitaliy Rayets Over a year ago

It's works thanks to removeChild() which removes a child node from the DOM

Alessandro Foolish Ciak DAnton · Accepted Answer · 2022-02-16 10:45:26Z

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.

ikhvjs · Accepted Answer · 2022-02-16 10:20:04Z

0

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>

answered Feb 16, 2022 at 10:20

ikhvjs

6,0874 gold badges24 silver badges53 bronze badges

6 Comments

Alessandro Foolish Ciak DAnton Over a year ago

That way you will fire the event every time someone clicks on #output which is a bad approach for optimization purposes.

ikhvjs Over a year ago

@AlessandroFoolishCiakDAnton, You may have a look of Why is JavaScript event delegation better than attaching events to each element?

ikhvjs Over a year ago

@AlessandroFoolishCiakDAnton, As you seems familiar with reactjs, reactjs is actually use one top level event listener for all the event in the virtual dom. the-guild.dev/blog/react-dom-event-handling-system

Alessandro Foolish Ciak DAnton Over a year ago

of course but that is not reactjs, it is pure javascript and we all need to pay attention to code optimization.

ikhvjs Over a year ago

@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.

|

Collectives™ on Stack Overflow

How to remove specific row in table using js

3 Answers 3

2 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related