views:

157

answers:

5

I have a table like this:

<table id='inventory_table'>
  <tr id='no_items_avail'>
    <td>
      There are no items in the database.
    </td>
   </tr>
</table>

And I want to get rid of it with jQuery like this:

$('#inventory_table tbody tr#no_items_avail').remove();

However it doesn't seem to be working at all. What am I doing wrong?

Edit: Also, the row above was originally inserted into the DOM with another jQuery call:

$('#inventory_table tbody').append("<tr id='no_items_avail'.......

If that helps. And, running:

alert($('#no_items_avail').text());

yields "There are no items in the database." as expected.

A: 

My guess is that you are using the same ID more than once in the same document? Because this works perfectly for me on IE8 (compatibility mode), FF and Chrome.

Of course it doesn't need to be that complex as this works perfectly:

$("#no_items_avail").remove();

Just remember that IDs have to be unique and duplicating them is a common reason why this kind of thing fails.

cletus
As mentioned above in my edit, running "alert($('#no_items_avail').text());" displays the text, demonstrating that jQuery is finding the right element.
George Edison
Never mind. See my comment above under the question. Thanks for trying it in your browser.
George Edison
+1  A: 

Your selector is unnecessary large. This is shorter and it works: $('#no_items_avail').remove();​​​​​

Also, make sure you have no other elements with same id.

Marko Dumic
I don't have any other elements with the same id.
George Edison
+5  A: 

You assume tbody to be available in your DOM. Only a few browsers add tbody to a table if it does not exist. Try

$('#inventory_table tr#no_items_avail').remove();

or even better

$('#no_items_avail').remove();

(since IDs must be unique anyway).

Marcel J.
Good point. But it still doesn't work.
George Edison
Now it does. And simplifying the selector was a good idea anyway. +1 for that.
George Edison
What browsers don't add implicit `<tbody>` elements?
cletus
Chrome at least, does.
George Edison
A: 

Try using dash '-' in your ids instead of underscore. I believe some browsers don't react well to underscores. Maybe I'm thinking about CSS instead of JS but give it a try for what it's worth.

John K
Thanks but it's fixed now. See above.
George Edison
A: 

1) Don't use IDs to identify stuff with jQuery, use classes or possibly path-based selection. 2) Don't add and remove content, show and hide it instead.

Dynamically changing your page content in arbitrary ways is not going to help maintainability, so I hope what you're doing well disciplined, in some way, and well documented. Think of the poor sod who will have to take over when you get hit by a bus or win the lottery.

reinierpost
Why would you possibly tell someone to not use ids to select? Selection by ID is the FASTEST possible method, and maps directly to javascript's `getElementById`
Erik
@Erik: right on. It's also the most intuitive.
George Edison
The use of IDs everywhere can be a sign of spaghetti code in which the overall design is very closely tied to accidental details of the implementation, making the result harder to change, to generalize, to reapply. Of course there isn't always a need for that, and it's just a rule of thumb anyway.
reinierpost