I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.

HTML

<div class="row well">
  <div class="artistAlbumInfo well col-md-6 ">
    <h3><span id="artist"></span> - <span id="track"></span></h3>
    <img src="" id="art" class="albumArt">
  </div>
  <div class="col-md-6">
    <h3 id="album"></h3>
    <h4>Playstate <p id="playState"></p></h4>
    <h4>Position <p id="position"></p></h4>
  </div>
</div>

JQuery

$(document).ready(function() {
  $('.row .well').hide();
});

/

Any ideas?

I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.

HTML

<div class="row well">
  <div class="artistAlbumInfo well col-md-6 ">
    <h3><span id="artist"></span> - <span id="track"></span></h3>
    <img src="" id="art" class="albumArt">
  </div>
  <div class="col-md-6">
    <h3 id="album"></h3>
    <h4>Playstate <p id="playState"></p></h4>
    <h4>Position <p id="position"></p></h4>
  </div>
</div>

JQuery

$(document).ready(function() {
  $('.row .well').hide();
});

http://jsfiddle/375c8v2a/1/

Any ideas?

• javascript
• jquery
• html
• css

• You're doing it wrong, just remove the second class .well you only need to point for the first one $('.row').hide();. Check out the online example on jsFiddle - jsfiddle/375c8v2a/2 – Chun Commented Jun 18, 2015 at 17:49
• I actually have multiple rows and I only want to target the one with both classes. – Richard Hamilton Commented Jun 18, 2015 at 17:50
• If well is a class created only for that specific row with the purpose of hiding that row, then you can use it as the trigger to hide it like this - $('.well').hide(); – Chun Commented Jun 18, 2015 at 17:56

4 Answers 4

You don't need a space between classes if you want to hide only those with both classes

$('.row.well').hide();

To do either or add a ma

$('.row, .well').hide();

What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant binator.

To seelct the element that has both classes, remove the space:

$(document).ready(function() {
  $('.row.well').hide();
  // ----^
});

That means "an element with class row and class well".

$('.row').hide();

please remove second class

From what I've read on the ments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:

$('.well').hide();

Click here to see a example on jsFiddle