CODEWITHSUNDEEP
javascriptjquery
joe_young
joe_young

Reputation: 4125

Remove td that doesn't have an id or class

I have a sort of simple problem but can't for the life of me figure it out...

I would like to remove an entire td from a tr (with its children: div with class 'sch', and a with an id 'hlp'. However, the td itself doesn't have an id, class, or any other defining characteristics per se.

Code for the tr 

<tr>
  <td nowrap="">
    <div class="sch">
      <a class="btn" href="?ae=Dialog&amp;t=AddressBook&amp;ctx=1" title="Address Book">
        <img src="http://placehold.it/35x35&text=1" alt="">Address Book</a>
    </div>
  </td>

  <td nowrap="">
    <div class="sch">
      <a class="btn" onclick="return onClkOp();" href="?ae=Options&amp;t=Messaging" title="Options">
        <img src="http://placehold.it/35x35&text=2" alt="">Options</a>
    </div>
  </td>

  <!-- ***** To be removed ***** -->
  <td nowrap="">
    <div class="sch">
      <a id="hlp" class="btn" href="#" title="Help">
        <img src="https://mail.kgs.org.uk/owa/8.3.298.1/themes/base/help.gif" alt="Help">
      </a>
    </div>
  </td>
  <!-- ********** -->

  <td nowrap="">
    <div class="sch">
      <a id="lo" class="btn" href="#" title="Log Off">
        <img class="noSrc" src="http://placehold.it/35x35&text=4" alt="">Log Off</a>
    </div>
  </td>
</tr>

I have tried:
1.

$(document).ready(function() {
   $("td").has(".sch").remove(); //This removes the entire row, which I don't want
});

2.

$(document).ready(function() {
   $("td").has(".sch").has("#hlp").remove(); //This doesn't work
});

3.

$(document).ready(function() {
   $(".sch").prev("td").remove();
   $("#hlp").prev(".sch").remove();   //Doesn't work...
});

NB: The reason I can't do this directly in my code, or add an id to the offending td and why it is a table is that I am editing my webmail (OWA) and am not able to physically change the code: I am using browser extensions to add Javascript and CSS, hence why it has to be JS or jQuery (or even CSS if there is a way to do that.)

Upvotes: 1

Views: 1230

Answers (3)

LSerni
LSerni

Reputation: 57408

The TD you seek to remove is the third. So if the page structure does not change, you can use :nth-child selector.

$(tableSelector + ' td:nth-child(3)').remove();

(you don't want to cut the third column out of all tables in the page).

Or you can work backwards, and target the a#hlp. Then use .closest() to find the enclosing td, and remove it.

Upvotes: 1

Jai
Jai

Reputation: 74738

Try this:

$(".sch").find('#hlp').closest('td').remove();

or as ids are unique so you can directly do this:

$('#hlp').closest('td').remove();


$('.sch').find('#hlp').closest('td').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td nowrap="">
    <div class="sch">
      <a class="btn" href="?ae=Dialog&amp;t=AddressBook&amp;ctx=1" title="Address Book">
        <img src="http://placehold.it/35x35&text=1" alt="">Address Book</a>
    </div>
  </td>

  <td nowrap="">
    <div class="sch">
      <a class="btn" onclick="return onClkOp();" href="?ae=Options&amp;t=Messaging" title="Options">
        <img src="http://placehold.it/35x35&text=2" alt="">Options</a>
    </div>
  </td>

  <!-- ***** To be removed ***** -->
  <td nowrap="">
    <div class="sch">
      <a id="hlp" class="btn" href="#" title="Help">remove
        <img src="https://mail.kgs.org.uk/owa/8.3.298.1/themes/base/help.gif" alt="Help">
      </a>
    </div>
  </td>
  <!-- ********** -->

  <td nowrap="">
    <div class="sch">
      <a id="lo" class="btn" href="#" title="Log Off">
        <img class="noSrc" src="http://placehold.it/35x35&text=4" alt="">Log Off</a>
    </div>
  </td>
</tr>
</table>

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use id of anchor element in has selector to only target desired td element:

$('td:has(div.sch a#hlp)').remove();

Working Demo

Upvotes: 2

Related Questions