Remove table row by finding content with Javascript

Question

i have this code:

<table>
    <tbody>
        <tr>
            <td align="left">X</td>
            <td>X1</td>     
        </tr>
        <tr>        
            <td width="150" align="left">Y</td>
            <td>Y1</td>
        </tr>
        <tr>    
            <td align="left">Status: </td>
            <td colspan="4">
                <select name="status" size="1">
                    <option selected="selected" value="2">one</option>
                    <option value="1">two</option>
                </select>                   
            </td>
        </tr>
        <tr>        
            <td width="150" align="left">Z</td>
            <td>Z1</td>
        </tr>   
    </tbody>
</table>

and want to remove with Javascript this line:

<tr>    
    <td align="left">Status: </td>
    <td colspan="4">
        <select name="status" size="1">
            <option selected="selected" value="2">one</option>
            <option value="1">two</option>
        </select>                   
    </td>
</tr>

the problem is that i don't have any id's or classes for identification. is there a way to remove the row by searching "Status: " or name="status" with javascript for Firefox only (using it for Greasemonkey)?

i can't use jQuery and i can't edit the code to set any id's

best regards bernte

Will the tr tag you want to remove always be the second one? Also, how do you find the table element in this markup? — wsanville
– wsanville, Commented Nov 28, 2012 at 20:02
the tr tag can be also the 5th.. and i'm using it in Greasemonkey for Firefox only — bernte
– bernte, Commented Nov 28, 2012 at 20:10

Denys Séguret · Accepted Answer · 2012-11-28 20:20:30Z

5

If you can afford not being compatible with IE7, You can do that :

var elements = document.querySelectorAll('td[align="left"]');
for (var i=0; i<elements.length; i++) {
    var text = elements[i].textContent || elements[i].innerText;
    if (text.trim()=='Status:') {
       elements[i].parentNode.parentNode.removeChild(elements[i].parentNode);   
    }
}

Demonstration

To be compatible with IE7, you'd probably have to iterate on all rows and cells, which wouldn't really be slower but would be less clear.

Note that I used trim which doesn't exist on IE8. To make it work on this browser if needed, you might add this usual fix (from MDN) :

if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

edited Nov 28, 2012 at 20:20

answered Nov 28, 2012 at 20:03

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

3 Comments

I Hate Lazy Over a year ago

This isn't compatible with IE8 and lower because of .trim(), and isn't compatible with any version of Firefox because of .innerText.

I Hate Lazy Over a year ago

+1 for the fixes. I'd personally put .textContent before .innerText just because it's the standards compliant one, but it'll obviously work either way.

Denys Séguret Over a year ago

I'll change it accordingly. But on this very precise topic I don't really get why the standardized name was textContent. Just the one time when it seems that Microsoft picked a pertinent name...

lostsource · Accepted Answer · 2012-11-28 21:09:32Z

3

function removeRowByCellValue(table,cellValue) {
    var cells = table.getElementsByTagName("TD");
    for(var x = 0; x < cells.length; x++) {

        // check if cell has a childNode, prevent errors
        if(!cells[x].firstChild) {
            continue;
        }

        if(cells[x].firstChild.nodeValue == cellValue) {
            var row = cells[x].parentNode;
            row.parentNode.removeChild(row);
            break;
        }
    }
}

First get a reference to your table, since you do not have an ID you can use getElementsByTagName.. (here i'm assuming that it is the first table in your document)

var myTable = document.getElementsByTagName("table")[0];

Then you can invoke the function with the following parameters

removeRowByCellValue(myTable,"Status: ");

edited Nov 28, 2012 at 21:09

answered Nov 28, 2012 at 20:05

lostsource

22k9 gold badges71 silver badges90 bronze badges

2 Comments

bernte Over a year ago

your script works fine.. but i have 4 html pages and one greasemonkeyscript with different functions! on site one with the status table all works perfect! on site 2 with no status table i receive an error cells[x].firstChild is null.. any ideas?

lostsource Over a year ago

please check updated answer, that error probably occurs when the table contains 'empty' cells

Jim Blackler · Accepted Answer · 2012-11-28 20:07:11Z

1

var xpathResult = document.evaluate("//td[starts-with(.,'Status:')]", document.body, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var element = xpathResult.singleNodeValue.parentNode;
while (element.firstChild)
  element.removeChild(element.firstChild);

Jsbin http://jsbin.com/urehuw/1/edit

answered Nov 28, 2012 at 20:07

Jim Blackler

23.3k12 gold badges90 silver badges101 bronze badges

2 Comments

Denys Séguret Over a year ago

I think document.evaluate doesn't exist on IE, even IE10.

Jim Blackler Over a year ago

Damn you IE!! (shakes fist)

David Thomas · Accepted Answer · 2012-11-28 20:07:15Z

And if you'd like to be compatible with older IE:

function closest(el, tag) {
    if (!el || !tag) {
        return false;
    }
    else {
        return el.parentNode.tagName.toLowerCase() == tag ? el.parentNode : closest(el.parentNode, tag);
    }
}

// gets all 'select' elements
var sel = document.getElementsByTagName('select');

// iterates through the found 'select' elements
for (var i=0, len = sel.length; i<len; i++) {
    // if the 'select' has the name of 'status'
    if (sel[i].name == 'status') {
        // uses the closest() function to find the ancestor 'tr' element
        var row = closest(sel[i], 'tr');
        // access the 'tr' element's parent to remove the 'tr' child
        row.parentNode.removeChild(row);
    }
}

JS Fiddle demo.

echo_Me · Accepted Answer · 2012-11-28 20:15:11Z

0

simply use this

    var gettag =document.getElementsByTagName("tr")[3] ; // the third tag of tr
         document.removeChild(gettag);

answered Nov 28, 2012 at 20:15

echo_Me

37.2k5 gold badges62 silver badges81 bronze badges

Collectives™ on Stack Overflow

Remove table row by finding content with Javascript

5 Answers 5

3 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related