tags:

views:

51

answers:

3

I have the following dynamically generated table on a page along with other tables on the page. I need to remove this table which does not have an id.There is one of two ways that I can think of to target the table for removal since these never change.

By the class="matching_results_text" or by the text "You are here"

Just do not know how to do it.

I tried $("table").remove(":contains('You are here:')"); but that didn't work right.

<table width="100%" border="0" cellspacing="0" cellpadding="5">
          <tr> 
            <td>        
                <b>You are here: <a href="http://www.test.com"&gt;Home&lt;/a&gt; &gt; <a href="http://www.test.com/Ignition-Controls-s/30.htm" title="Ignition Controls">Ignition Controls</a></b>
<div class="matching_results_text">We found 10 results matching your criteria.</div>

 </td>
          </tr>
        </table>
+2  A: 
$("table").each(function() {
    var thisTable = $(this);
    if($(this).children().is(":contains('You are here')")) {
        thisTable.remove();
    }
});
Marko
This will actually not work since some (but not necessarily all) browsers insert a `<tbody>` element if it is not present. So chaining `.parents()` may give different results in different broswsers.
patrick dw
This did not work as it removed pretty much all markup from the page
You're right patrick, I've included an answer which searches all children. Might not be very fast though if there are lots of elements to match.
Marko
Marko - Unfortunately, your new solution will only remove the `.children()` elements that contain "You are here". Also, remember that `.children()` only searches one level deep. :o)
patrick dw
user357034 I've edited my answer. See it in action here http://jsfiddle.net/pqL7R/
Marko
Hmm - have you run the jsfiddle? It seems to remove the whole table.
Marko
Marko - I'm looking at it right now. It didn't remove the table. Also, your table doesn't have any `<tbody>` and `<tr>` elements, which the browsers will likely insert.
patrick dw
Marko - Even if it did work without `<tbody>` and `<tr>` elements, remember that when you call `.children()` it returns a different set of elements. So the `.remove()` is called against that matching set, not against the `table`. :o)
patrick dw
This did not remove anything
Your right @patrick. I've edited my answer... yet again :/ Thanks for your input :)
Marko
If this is incorrect again - I will delete my answer and put my head down in shame :)
Marko
Still not targeting the right table as this removes most of the page (my guess is the parent table of this table, but I appreciate the effort!!!!
Marko - Well, yes it does work (no need to put your head down) but it is really just a long version of doing `$("table:contains('You are here')").remove();` which is accomplishing the same thing. Unfortunately, it runs into the issue of nested tables that the OP referenced under *Gert G's* answer. :o)
patrick dw
Ahh nested tables - didn't account for that. +1 for you :)
Marko
@Marko - You're welcome. Thanks for the +1. :o)
patrick dw
+2  A: 

EDIT: Note, that if there is more than one element with div.matching_results_text or a[title=Ignition Controls], it will not work, as you will match all of those elements.

If that is the case, try the last solution I gave, or post more of your HTML structure. There may be ancestor elements that will help.


jQuery's .closest() method returns one result containing the closest ancestor matching the selector.

    // Starting point is the class name
$('table div.matching_results_text').closest('table').remove();

or

    // Starting point is the <a> element with the title Ignition Controls
$('table a[title=Ignition Controls]').closest('table').remove();

Just for fun, I'll throw one more option out there that uses :contains() and .closest().

    // Starting point is the <b> element that contains "You are here"
$('table b:contains(You are here)').closest('table').remove();

http://api.jquery.com/closest/

If you know that it is (for example) the 3rd table on the page, you could use the index reference.

     // Get the third table on the page
$('table:eq(2)').remove();

http://api.jquery.com/eq-selector/

patrick dw
The 1st method worked as that class will not change.The 2nd method will not work as that title will vary, Also cannot use the 3rd example cause the placement of this table may change could be 4th could be 5th or something else.
@user - Just be aware that if you have other `div.matching_results_text` elements inside other `tables`, it will delete those tables too.
patrick dw
There is only one occurrence of the class "matching_results_text" on the page. thx!!!!
@user - You're welcome. :o)
patrick dw
+1  A: 

The easier way:

$("table:contains('You are here')").remove();
Gert G
http://jsfiddle.net/R55HA/
Dex
This in theory should work and I tried it but I think if you have nested tables like this one is it removes the 1st table so most of my page disappears. How would we target the immediate table rather than the first one that "You are here" is in something like .this ???
It worked for what you originally asked. Use patrick's answer. It works the way you want.
Gert G