/    Sign up×
Community /Pin to ProfileBookmark

How to delete a table row with JavaScript

Copy linkTweet thisAlerts:
Nov 02.2020

I have a html table with 4 columns, the first cell contains a button that adds a row to the table when pressed. Each row added also contains a button that deletes that same row. This is the code I have
`var table = document.getElementById(ID);
var row = table.closest(“tr”);
table.deleteRow(row);`
The problem is its deleting the first row, not the current row.
I tried using
`var row = this.closest(“tr”);`
to no avail.
Any appreciated.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@NachfolgerNov 02.2020 — @rpjd1#1624800

Look at the docs for table.deleteRow--The function .deleteRow(index) deletes the row at the specified index.

https://www.w3schools.com/jsref/met_table_deleterow.asp

You can approach this in a plethora of ways. Here are two:
  • 1. Set the outerHTML property of row to empty (Eg. row.outerHTML = "")

  • 2. Access the row index and call deleteRow on it (Eg. table.deleteRow(row.rowIndex))


    • I've never used the latter, and it's a lot more code than the first one.
    Copy linkTweet thisAlerts:
    @rpjd1authorNov 03.2020 — For what I'm doing, I don't care about extra code if it works. This works

    function deleteRow(x)<br/>
    {<br/>
    var table = document.getElementById(ID);<br/>
    var row = x.closest("tr").rowIndex;<br/>
    table.deleteRow(row);<br/>
    }
    Copy linkTweet thisAlerts:
    @HarshShahNov 04.2020 — @rpjd1#1624800

    Using the below code you can add a row and delete the row.

    HTML
    ``<i>
    </i>&lt;html&gt;
    &lt;head&gt;
    &lt;script type="text/javascript" src="table_script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="wrapper"&gt;
    &lt;table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1&gt;
    &lt;tr&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Country&lt;/th&gt;
    &lt;th&gt;Age&lt;/th&gt;
    &lt;/tr&gt;

    &lt;tr id="row1"&gt;
    &lt;td id="name_row1"&gt;Ankit&lt;/td&gt;
    &lt;td id="country_row1"&gt;India&lt;/td&gt;
    &lt;td id="age_row1"&gt;20&lt;/td&gt;
    &lt;td&gt;
    &lt;input type="button" value="Delete" class="delete" onclick="delete_row('1')"&gt;
    &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr id="row2"&gt;
    &lt;td id="name_row2"&gt;Shawn&lt;/td&gt;
    &lt;td id="country_row2"&gt;Canada&lt;/td&gt;
    &lt;td id="age_row2"&gt;26&lt;/td&gt;
    &lt;td&gt;
    &lt;input type="button" value="Delete" class="delete" onclick="delete_row('2')"&gt;
    &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr id="row3"&gt;
    &lt;td id="name_row3"&gt;Rahul&lt;/td&gt;
    &lt;td id="country_row3"&gt;India&lt;/td&gt;
    &lt;td id="age_row3"&gt;19&lt;/td&gt;
    &lt;td&gt;
    &lt;input type="button" value="Delete" class="delete" onclick="delete_row('3')"&gt;
    &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
    &lt;td&gt;&lt;input type="text" id="new_name"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="new_country"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="new_age"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" class="add" onclick="add_row();" value="Add Row"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;<i>
    </i>    `</CODE>
    JS
    <CODE>    `<i>
    </i>function edit_row(no)
    {
    var name=document.getElementById("name_row"+no);
    var country=document.getElementById("country_row"+no);
    var age=document.getElementById("age_row"+no);

    var name_data=name.innerHTML;
    var country_data=country.innerHTML;
    var age_data=age.innerHTML;

    name.innerHTML="&lt;input type='text' id='name_text"+no+"' value='"+name_data+"'&gt;";
    country.innerHTML="&lt;input type='text' id='country_text"+no+"' value='"+country_data+"'&gt;";
    age.innerHTML="&lt;input type='text' id='age_text"+no+"' value='"+age_data+"'&gt;";
    }

    function delete_row(no)
    {
    document.getElementById("row"+no+"").outerHTML="";
    }

    function add_row()
    {
    var new_name=document.getElementById("new_name").value;
    var new_country=document.getElementById("new_country").value;
    var new_age=document.getElementById("new_age").value;

    var table=document.getElementById("data_table");
    var table_len=(table.rows.length)-1;
    var row = table.insertRow(table_len).outerHTML="&lt;tr id='row"+table_len+"'&gt;&lt;td id='name_row"+table_len+"'&gt;"+new_name+"&lt;/td&gt;&lt;td id='country_row"+table_len+"'&gt;"+new_country+"&lt;/td&gt;&lt;td id='age_row"+table_len+"'&gt;"+new_age+"&lt;/td&gt;&lt;td&gt;&lt;input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'&gt;&lt;/td&gt;&lt;/tr&gt;";

    document.getElementById("new_name").value="";
    document.getElementById("new_country").value="";
    document.getElementById("new_age").value="";
    }<i>
    </i>    ``
    ×

    Success!

    Help @rpjd1 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...