Question

Here’s a weird question, I’m trying to remove an element, but the problem is, it is unclassified. The entire source code is here:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr> 
   <td valign="top"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tbody>
      <tr>          
       <td id="Header_ProductDetail_ProductDetails"></td>
       <td id="Header_ProductDetail_TechSpecs"></td>
       <td id="Header_ProductDetail_ExtInfo"></td>
      </tr>
     </tbody>
    </table>
   </td>
   <td width="1" valign="bottom">&nbsp;</td>
  </tr>
 </tbody>
</table>

Do you see the

<td width="1" valign="bottom">&nbsp;</td>

I want that deleted, but the problem is that I do not want to do something like td[valign=bottom].remove() because that will mean the everything with a valign=”bottom” will be deleted. I would rather go to the nearest element that is identified like td#Header_ProductDetail_ProductDetails add something like $(‘td#Header_ProductDetail_ProductDetails’).parent().parent().parent().parent().closest(td).remove();
Although, I know that’s crazy talk since you probably can’t jump up four parents, but I don’t know how else to have that removed? Does anybody know if there’s a quick solution to this?

Answer 1

Try filtering your results based on html content using the filter function.

$("td").filter(function() { return $(this).html() === ' '; }).remove();