remove table which contains certain text

Question

I would like to remove the following table from the page with Jquery by targeting the following text "To add the above items to your cart".

I tried this but didn't work as expected it removes a different parent td. Not sure how to target this td only.

$("* :contains('To add the above items to your cart')").closest('td').remove();

<td colspan="11" class="colors_backgroundlight" align="right"> 
<span>To add the above items to your cart, click the "Add" checkboxes then click "Add To Cart" &gt;&gt;&gt;</span> <input type=submit value="Add To Cart" onclick="refineResults=false;" name="checkboxes_mode_submitbtn"

Answer 1

You can do it like this:

$("span:contains('To add the above items to your cart')").closest('td').remove();

Any parent will also contain the text, since it's in a child element. You need to be a bit more specific about what contains the text and move up from there...otherwise it'll find all the parents as well.

Or, to be very accurate, but probably overkill:

$("span:contains('To add the above items to your cart')").filter(function() {
  return this.innerHTML.indexOf('To add the above items to your cart') === 0;
}).closest('td').remove();

Answer 2

Remove the table or just the table cell?... removing just the cell will break your table layout. Try this instead (to clear out the table cell)

$("span:contains('To add the above items to your cart')").empty();

Edited above, Nick is right, it'll break nested cells, the update above won't.

Answer 3

Why not simply use:

$("td:contains('To add the above items to your cart')").remove();​

Answer 4

Besides the answers that handle the exact problem, you could alter your html by adding a class to that span and target that instead..

so the

<td colspan="11" class="colors_backgroundlight" align="right"> 
<span>To add the above items to your cart, click the "Add" checkboxes then click "Add To Cart"...

could become

<td colspan="11" class="colors_backgroundlight" align="right"> 
<span class="removable">To add the above items to your cart, click the "Add" checkboxes then click "Add To Cart"...

and then targeted with

$(".removable").closest('td').remove();

or for more complex scenarios where you could have different rules for removal of nodes..

$(".removable:contains('To add the above items to your cart')").closest('td').remove();