tags:

views:

34

answers:

3

I have a page that uses jQuery with a small glitch.

I managed to get this down to a simple example that demonstrates the problem:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

function hideIt()
{
    $('#hideme').fadeOut('slow', function() { $(this).remove(); } );
}

</script>
</head>
<body>
<div id='#hideme'>Hide me!</div>
<button onclick='hideIt();'>Hide</button>
</body>
</html>

As you would expect, the problem is simple: the caption doesn't disappear.

What simple thing did I overlook? (Or if it's not a simple thing, what complicated thing did I miss?)

+6  A: 

Try removing the # in <div id='#hideme'>Hide me!</div> :)

James Kolpack
I am such an idiot :)
George Edison
It's small stuff like that where it's so easy to overlook - it's good to lend it a fresh set of eyes.
James Kolpack
Thanks man. I got so used to using # for selecting that I just absent-mindedly typed it in the id attribute.
George Edison
+4  A: 

The selector is not finding your div, because you have an # character on it:

Change:

<div id='#hideme'>Hide me!</div>

To:

<div id='hideme'>Hide me!</div>
CMS
Thank you, but James beat you to the answer, so I gave the best answer to him. +1 for finding it though.
George Edison
+1  A: 

The ID of the div should be "hideme" not "#hideme"

Raul Agrait
This is the same as what was mentioned above in the other answers.
George Edison