Remove a row from a table with JavaScript

Question

I have a problem removing a row with JavaScript, since it does not have a class nor an ID, I can not reference it with CSS.

The row I'd like to eliminate begins with the text: Post

Hope someone can help

Can you post your code, or even better, make a demo for us on JsFiddle? — Peter Olson
– Peter Olson, Commented Mar 2, 2011 at 21:46
You'll need to provide more information than that. Also, your topic says "Java" which is incorrect. Another question is how do you want to remove it. Is there an Enter button somewhere? Do you click on a link? Do you have the code available of what you want to do? — Duniyadnd
– Duniyadnd, Commented Mar 2, 2011 at 21:47
Your question is extremely vague, we can't make sense of it. Also, is a jQuery solution acceptable or can you not use it? — BoltClock
– BoltClock, Commented Mar 2, 2011 at 22:01

Šime Vidas · Accepted Answer · 2011-03-02 23:02:25Z

4

This does it:

var rows = document.getElementById('theTable').rows;

for (var i = 0; i < rows.length; i++) {
   if ( rows[i].firstElementChild.textContent.trim().split(' ')[0] === 'Post' ) {
       rows[i].parentNode.removeChild(rows[i]);
   }  
}

Note: trim() and what not does not work in IE8. You can leave it out, but then you have to make sure that there is no leading white-space before the word "Post".

Live demo: http://jsfiddle.net/simevidas/xn6U8/

Update:

var rows = document.getElementsByClassName('basket')[0].rows;

for (var i = 0; i < rows.length; i++) {
   if ( rows[i].cells[0].textContent.trim().split(' ')[0] === 'Post' ) {
       rows[i].parentNode.removeChild(rows[i]);
   }  
}

Live demo: http://jsfiddle.net/simevidas/A73PK/2/

edited Mar 2, 2011 at 23:02

answered Mar 2, 2011 at 22:05

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

12 Comments

Murali VP Over a year ago

This the correct way too, split(' ')[0] === 'Post' checks the beginning

Pete Over a year ago

hmm! I can not get it to work - here is the entire table <table class="basket" border="0" style="width:100%;"> <tr> <td colspan="3"> </td> </tr><tr> <td class="name">Post Danmark eller GLS takster</td><td class="price-right" align="right">0,00%</td> <td class="price-right" align="right">0,00 DKK</td> </tr><tr> <td>Faktura (Total m/moms)</td><td class="price-right" align="right">0,00%</td> <td class="price-right" align="right">0,00 DKK</td> </tr> </table>

Šime Vidas Over a year ago

@Pete In my demo the table has an ID and I use getElementById to select it. Your table does not have an ID. You have to either define an ID, or use another means to select the table element. But my code works for your table. See here: jsfiddle.net/simevidas/A73PK

user113716 Over a year ago

@Šime: I'd just note that firstElementChild and textContent aren't supported in IE before IE9. For firstElementChild, you can use .cells[0] instead to get the first cell in the row.

Pete Over a year ago

But the problem is, I can't change the Code, can't I remove the table when it has a class=

|

Collectives™ on Stack Overflow

Remove a row from a table with JavaScript

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related