How do I remove all classes in my li elements?

2288 views javascript
1

Note, I'm using React. How do I delete all the classNames in li that have turnRed?

Here is my code:

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

Note, I've tried

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

However, I get an error.

answered question

1 Answer

13

You could select them with document.querySelectorAll and then forEach use removeAttribute():

let red = document.querySelectorAll("li[className='turnRed']")
         .forEach(el => el.removeAttribute('className'))

console.log(red)
  <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>

posted this

Have an answer?

JD

Please login first before posting an answer.