Here is my jsfiddle:

/

The code:

$('.theHider').click(function () {
    $("'." + $(this).id + "'").hide();
});

The HTML:

<div class="cola">This will be cola</div>
<div class="cola">This will be cola</div>
<div class="birch">This will be birch</div>
<div class="cola">This will be cola</div>
<div class="cola">This will be cola</div>
<div class="orange">This will be orange</div>
<div class="birch">This will be birch</div>
<div id="cola" class="theHider">This will hide cola</div>
<div id="birch" class="theHider">This will hide birch</div>
<div id="orange" class="theHider">This will hide orange</div>

I can't understand why this doesn't work.

As for document ready etc etc, I took it out when it was preventing jsfiddle from working.

Here is my jsfiddle:

http://jsfiddle/fk434/

The code:

$('.theHider').click(function () {
    $("'." + $(this).id + "'").hide();
});

The HTML:

<div class="cola">This will be cola</div>
<div class="cola">This will be cola</div>
<div class="birch">This will be birch</div>
<div class="cola">This will be cola</div>
<div class="cola">This will be cola</div>
<div class="orange">This will be orange</div>
<div class="birch">This will be birch</div>
<div id="cola" class="theHider">This will hide cola</div>
<div id="birch" class="theHider">This will hide birch</div>
<div id="orange" class="theHider">This will hide orange</div>

I can't understand why this doesn't work.

As for document ready etc etc, I took it out when it was preventing jsfiddle from working.

• javascript
• jquery
• html
• dom

• Thanks guys, changing the quotes seemed to work. As for the $(this).id vs. this.id, I had tried both with the wrong quotes and neither had worked, but thanks. It works now, but a clarifying question about the quotes: to mimic $('.sampleSelector') <-- this element, wasn't I formatting it correctly? wouldn't what I changed it to make the selector $(.className), against jQuery syntax? – jackwritescode Commented Aug 14, 2013 at 15:28

5 Answers 5

id is a property of the DOM element itself, not the jQuery wrapper, so it should be this.id, not $(this).id. You also have some extraneous quotes that need to be removed:

$('.theHider').click(function () {
    $("." + this.id).hide();
});

It's your quotations that stops it from working, the selector gets invalid. Try this:

$('.' + this.id).hide();

There is no field $(selector).id you're mixing javascript elements with this jquery element.

Try this:

$('.theHider').click(function() {
  var selector = "."+$(this).prop("id");
  $(selector).hide();
});

The problem here is that you have inserted too many quotes into your selector.

$( "'." + this.id + "'" ).hide();
// ^----------------^------ these are not needed

You don't have to add the single quotes - just build your selector normally -

$( "." + this.id ).hide();

Here is a fixed version of your fiddle

Make sure to check your JavaScript console whenever you are having problems. With your original code, there was this error on the same line as the selector you were building:

Uncaught Error: Syntax error, unrecognized expression: '.cola'

This will fix the problem:

$('.' + this.id)

However, I would like to bring data attributes to your attention:

<div class="theHider" data-tohide="cola">This will hide cola</div>

This allows you to use the identifier for something else if you need to; the click handler looks like this:

$('.theHider').on('click', function() {
    $('.' + $(this).data('tohide')).hide();
});