[jQuery] ~ selector is not selecting siblings
I have a table that has a list of songs - one for each row. I also
have a select menu that populates the song table data from an AJAX
query based on what was selected.
The first row of the table is a row (#NoSongs) that just says "No
songs were found." in case no records were returned. And I just hide
and show that depending on the results.
Whenever the select menu is changed, it calls a function where the
logic is like this:
function ChangeSongs() {
$("#NoSongs ~ tr").fadeOut('slow',function() {
$("#NoSongs ~ tr").remove();
});
// AJAX Query and a bunch of logic to create new table rows --
Everything here on works fine.
}
The problem is that $("#NoSongs ~ tr") isn't finding any of its
siblings. So, it just keeps adding new rows without deleting the old
ones. And $("#NoSongs ~ tr").size() returns 0 for some reason.
I could try .siblings() but I only want the rows after #NoSongs
(there's a table header row as well) and .siblings() returns all
siblings forward and backward.
I'm stumped. It should work even if #NoSongs is hidden from view,
right? I'm really not comprehending why this isn't working.
Any help would be appreciated. Sorry I can't show the actual code or
site.