如何删除li元素中的所有类

Question

注意，我使用的是React。如何删除li中所有已变成红色的classNames？

<li>
<a href='/test'>Test1</a>
<ul className="t1"
id="deleteRed">
<li>t1</li>
<li className="turnRed">t2</li>
<li className="turnRed">t3</li>
<li className="turnRed">t4</li>
<li className="turnRed">t5</li>
</ul>
</li>

注意，我试过

document.getElementById("deleteRed").children.query.className = "";

然而，我得到了一个错误。

Answer 1

我认为您需要将属性className更改为class。

您可以使用函数Document.querySelectorAll，它返回静态(非活动(NodeList。

使用属性class，选择器非常简单，不仅如此，您还可以使用属性classList，该属性提供元素中的类列表。该属性有几个方法，其中一个是删除类的方法remove()。

Array.from(document.querySelectorAll('#deleteRed li.turnRed'))
.forEach(li => li.classList.remove('turnRed'));

.turnRed{
color: red
}

<li>
<a href='/test'>Test1</a>
<ul class="t1" id="deleteRed">
<li>t1</li>
<li class="turnRed">t2</li>
<li class="turnRed">t3</li>
<li class="turnRed">t4</li>
<li class="turnRed">t5</li>
</ul>
</li>

如果你真的需要className属性，你可以使用类似的方法

console.log('Before remove:', document.querySelectorAll('#deleteRed li[className="turnRed"]').length);
Array.from(document.querySelectorAll('#deleteRed li[className="turnRed"]'))
.forEach(li => li.removeAttribute('className'));
console.log("After remove:", document.querySelectorAll('#deleteRed li[className="turnRed"]').length);

<li>
<a href='/test'>Test1</a>
<ul class="t1" id="deleteRed">
<li>t1</li>
<li className="turnRed">t2</li>
<li className="turnRed">t3</li>
<li className="turnRed">t4</li>
<li className="turnRed">t5</li>
</ul>
</li>

Answer 2

很抱歉这条评论太长了，所以把它放在这里作为答案。

既然您使用的是react，那么您根本不应该使用document.getElementById。理想情况下，红色或非红色的逻辑将通过redux或其他状态管理工具存储在组件的状态中，或者更好地存储在应用程序的状态中。

下面是一个切换对象为红色的例子。您可以添加更复杂的逻辑，或者更好地将回调传递给子对象！检查父级中的handleClick操作和子级中的clickAction。看看我们是如何将索引值从子级传递回父级的，以便它可以在正确的位置更新状态的？在现实世界中，您可能会使用id，但为此目的，索引也同样有效。

如果有什么令人困惑的地方，或者你需要帮助理解这个答案的任何部分，请告诉我！

// takes a list of items and adds the isRed classname if its red
const RedList = ({items, clickAction}) => {
return (
<ul>
{items.map(
(item, index) => {
// set the classnames
let className = item.isRed ? 'isRed' : '';
if (item.isBold) {
className = className + ' isBold';
};
return (
<li
onClick={() => clickAction(index)}
key={index} className={className}>
{item.name}
</li>
);
})
}
</ul>
)
}
// this container handles the logic for setting if an object is red or not
class Container extends React.Component{
constructor(props){
super(props);
this.state={
items: [
{
isRed: false,
name: 't1',
isBold: false,
},
{
isRed: true,
name: 't2',
isBold: false,
},
{
isRed: true,
name: 't3',
isBold: false,
},
{
isRed: true,
name: 't4',
isBold: false,
},
{
isRed: true,
name: 't5',
isBold: false,
},
{
isRed: true,
name: 't6',
isBold: false,
},
]
};
}

deleteRed = () => {
const newState = this.state.items
.map(item => ({
isRed: !item.isRed,
name: item.name,
isBold: item.isBold
}));
this.setState({items: newState});
}

// this gets passed into the child and accepts an 
//index value
handleClick = (itemIndex) => {
const newState = this.state.items
.map((item, index) => {
if(index === itemIndex) {
return {
name: item.name,
isRed: item.isRed,
isBold: !item.isBold,
};
} else {
return item;
}
});
this.setState({items: newState});
}

render(){
return (
<li>
<button onClick={this.deleteRed}>Test1</button>
<ul class="t1" id="deleteRed">
<RedList 
items={this.state.items}
clickAction={(index) => this.handleClick(index)}
/>
</ul>
</li>
);
}
}
ReactDOM.render(<Container/>, document.getElementById('root'));

.isRed {
color: red;
}
.isBold {
font-weight: bold;
font-size: 24px;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>