Search code examples
jquerytreechildren

How to remove a class name with jQuery for all children of a div element?


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


Solution

  • 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>