Tutorial :remove table without id using jquery



Question:

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">Home</a> &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>  


Solution:1

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/


Solution:2

$("table").each(function() {      var thisTable = $(this);      if($(this).children().is(":contains('You are here')")) {          thisTable.remove();      }  });  


Solution:3

The easier way:

$("table:contains('You are here')").remove();  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »