I searched some code, on how to remove a class name, from a tree menu, in that way to stop that tree menu type, and that can use a normal div box. In other words, my jQuery code add a class by itself , and I want to remove it from a certain div, and from all children of that div ( children, grand-children, grand grand-children , etc. ... ).
( I take the html, css, and jQuery codes from a tutorial on youtube :D )
My html code it's like this :
<div class="meniuArbore">
<div><p>Bucharest</p>
<div>Place 1
<div class="prezentare"> // from this on (inclusive), to don't have the tree menu style
<div class="prezentareBox1">
</div>
<div class="prezentareBox2">
</div>
</div>
</div>
</div>
My CSS style like this :
.prezentare {
width: 153mm;
height: 40mm;
border: 0.5mm solid #000;
}
.meniuArbore {
padding-top: 10px;
}
.meniuArbore div {
padding-left: 20px;
}
.meniuArbore .parinte div {
display: none;
cursor: default;
}
.meniuArbore .parinte {
cursor:pointer;
background:transparent url(http://www3.telus.net/jianlu58/plus.gif) no-repeat left 1.1mm;
}
.meniuArbore .extins {
background:transparent url(http://www3.telus.net/jianlu58/minus.gif)no-repeat left 0.2mm;
}
And the jQuery code :
/* Meniu tree */
$(function() {
$('.meniuArbore div:has(div)').addClass('parinte');
// I added here the code from bellow, that I came up with ...
$('.meniuArbore div').click(function() {
var thistree = $(this);
thistree.children('div').toggle();
thistree.filter('.parinte').toggleClass('extins');
return false;
});
});
And the code that I think it should remove the class "parinte" bellow the class "prezentare" is this :
$('div:hasClass(prezentare)').removeClass('parent');
$('div:hasClass(prezentare)').find('*').removeClass('parent');
Some advise please ! I'm new to jQuery, but I feel that I'm very close. :D
All you need to do is use the parent name in the selector before the classname you want to remove from the children:
let's say you have a parent with an ID container with children that have the classname of "classYouWantToRemove". You would it it like this.
$("#container .classYouWantToRemove").removeClass("classYouWantToRemove")
Take a look at the working snippet to see the html and inline JQuery work.
#container .classYouWantToRemove {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div><div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
<div class="classYouWantToRemove">Hey</div>
</div>
<button id="removeAll" onclick='$("#container .classYouWantToRemove").removeClass("classYouWantToRemove")'>Remove classes</button>