Question

注意，我正在使用React。如何删除li中所有具有turnRed的className？

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

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

2 个答案: