如何为一个div元素的所有子元素删除带有jQuery的类名？

Question

我搜索了一些代码，关于如何从树形菜单中删除类名，以这种方式停止树形菜单类型，并且可以使用普通的div框。换句话说，我的jQuery代码自己添加了一个类，我希望从某个div以及该div的所有子目录(子目录、孙子目录、孙子目录等)中删除它。

(我取自youtube上的教程中的html、css和jQuery代码:D )

我的html代码是这样的：

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

​

我的CSS样式如下：

.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;
}

和jQuery代码：

/* 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;
});
});

我认为它应该删除类"prezentare“下面的"parinte”类的代码如下：

$('div:hasClass(prezentare)').removeClass('parent');
$('div:hasClass(prezentare)').find('*').removeClass('parent');

请多多指教！我是jQuery的新手，但我觉得我离它很近。:D

Answer 1

您所需要做的就是在选择器中将父名称放在要从子对象中删除的类名之前：

假设您有一个具有ID容器的父类，其子类名为"classYouWantToRemove“。你会这样做的。

$(“#容器.classYouWantToRemove").removeClass("classYouWantToRemove")

查看工作代码片段以查看html和内联JQuery的工作情况。

​

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

​