Billy Billy - 3 months ago 8
CSS Question

How to find elements and siblings within a tree

I have code which deletes duplicate rows by selecting duplicated thead elements. It removes the last thead element however how would I select the elements within the thead element that is NOT removed and do the following:


  • select the first
    <span>
    element and hide it

  • select the second
    <span>
    element and show it



So far I know I can use the find() method to find the first span and I know I can use nth-of-type(2) to find its sibling.

I do not want to give the td or span elements any further class or id names. And please not to use the hiddenspan class name to show.

CSS

.hiddenspan {
display: none;
}


HTML

<table id="test">
<thead class="test className">
<tr>
<td>test1<td>
</tr>
<tr>
<td>test2</td>
<td><span>some text</span>
<span class="hiddenspan">some other text</span>
</td>
</tr>
</thead>
<thead class="test className">
<tr>
<td>test1<td>
</tr>
<tr>
<td>test2<td>
</tr>
</thead>
</table>


I would like this result

<table id="test">
<thead class="test className">
<tr>
<td>test1<td>
</tr>
<tr>
<td>test2</td>
<td><span>some other text</span></td>
</tr>
</thead>
</table>


Jquery:

var $thead = $('thead.test.className:contains(test1)');

if ($thead.length > 1) {
$thead.not(':first').remove()
}

Answer

The best way i think

$("#test span:nth-child(1)").hide();

$("#test span:nth-child(2)").show();
Comments