Question

I have a generated table that has too many <td> elements. I call

$('#Container td[class!="SlideInfo"]').remove();

to remove all of the unwanted <td> elements that does not have the class name SlideInfo on it. Problem is that I have a inner table (child) that gets removed as well. How can I tell jQuery to only remove the siblings of the <td>s not the inner one as well.

Starts off

<table>
<tr>
<td class="SlideInfo">
    <table>
        <td class="SlideInfo">
            This gets removed, I know the html is wrong on this but this is an example.
        </td>
    </table>
</td>

<td class="SlideInfo">
    <table>
        <td class="SlideInfo">
            This gets removed, I know the html is wrong on this but this is an example.
        </td>
    </table>
</td>
</tr>
</table>

I call $('#Container td[class!="SlideInfo"]').remove(); and it removes those unwanted td‘s but it also removes the children td‘s of the ones I do want.

Answer 1

Use the child selector ‘>’ which will only look for the matching elements among the immediate children of the container. Try this

$('#Container > td[class!="SlideInfo"]').remove();