CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Richard Hamilton
Richard Hamilton

Reputation: 26434

jQuery - How to hide an element and its children?

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.net/375c8v2a/1/

Any ideas?

Upvotes: 3

Views: 1859

Answers (4)

Chun
Chun

Reputation: 2270

From what I've read on the comments 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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074058

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 combinator.

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".

Upvotes: 3

Prashant Valanda
Prashant Valanda

Reputation: 480

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

please remove second class

Upvotes: 3

depperm
depperm

Reputation: 10746

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 comma

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

Upvotes: 6

Related Questions