Question

I have a ".hidden" class, and I build DOM elements in realtime. So I get a simple code like:

...
    <div class="hidden">1</div>
    <div class="hidden">2</div>
    <div class="hidden">3</div>
...

My CSS definition is more than simple:

.hidden {
display: none;
}

.hidden:first-child {
display: block;
}

Everything is good everyone is happy. Now if I do something like: $('.hidden:first-child').remove() it removes, however the next element doesn’t appear. It only seems to appear when I click on a DOM node in the developer console(ctrl+shift+i in chrome).

Any thoughts how to force the browser to evaluate the CSS rule?

UPDATE
This is a jsFiddle test case. You will see “0” once buttons is clicked, there’s no another number, and it should be “1”, then “2” and so on.

CONCLUSION:
Strangely, however if I removed fadeOut(400) before remove() It works.

Answer 1

Try using css pseudoclass :first-of-type instead of :first-child

Here is a working example on jsFiddle : http://jsfiddle.net/jukDU/3/