JQuery - How to hide an element and its children?
I have div
one that I would like to hide along with all of it children
. I thought a simple one 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?
source to share
Which you didn't work because it .row .well
means "an element with a class well
inside (as a child or deeper child)) an element with a class row
. In CSS it is a descendant collector .
To remove an element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
It means "element with class row
and class well
".
source to share
From what I read in the comments, the class .well
was purposely created to indicate which class .row
to hide as you have many classes row
. Then you can use it as a trigger to hide it row
instead of doing it: $('.row.well').hide();
you can simply specify the target class by doing:
$('.well').hide();
Click here to see an example jsFiddle
source to share