为什么 class 会从 classList 中删除，而不是从目标事件本身中删除？

Question

I have a list of paragraphs generated dynamically, each one with an svg for a sync icon (fontawesome) as a child element. When the user clicks on the icon, a class of fa-spin is added causing the icon to spin. After some asynchronous code, simulated below by setTimeout() , I want to remove the newly-added fa-spin class to have it added again the next time the icon is clicked. The problem is that event.target.classList.remove('fa-spin'); is not working. By running some console.log() calls I can see that the classList indeed gets the class removed and even the element shows up as no longer having it, however, if I check it the " Elements " tab of the dev tools and the UI itself, the svg still has the class and therefore the icon keeps on spinning.

Please note that toggle() is not the behavior I'm looking for because upon a click the class should always be added again.

HTML

  <div id="version-control-tms">
    <div id="version-control-repos">
      <h2>Version control repos</h2>
    </div>
    <div id="tms-projects">
      <h2>TMS projects</h2>
    </div>
  </div>

Paragraph.js

export default class Paragraph {

  constructor(items, placement) {

    this.items = items;
    this.placement = placement;

}

  create() {

    this.items.forEach((item, index) => {
        const paragraph = document.createElement('p');
        let placeInUI = document.querySelector(this.placement);
        paragraph.setAttribute('class', 'resource');
        paragraph.textContent = item.name;
        placeInUI.appendChild(paragraph);
        this.implementUpdateIcon(index);
    });
  }

implementUpdateIcon (item) {

  const resource = document.getElementsByClassName('resource')[item];
  const child = document.createElement('spam');
  child.setAttribute('class', 'fas fa-sync-alt');
  resource.append(child);
}

}

main.js

  document.getElementById('version-control-tms').addEventListener('click', event => {

      if (event.target.classList.contains('fa-sync-alt')) {
    
        event.target.classList.add('fa-spin');

        // Run some asynchronous code...
        setTimeout(() => {
          event.target.classList.remove('fa-spin');
        }, 3000);

      }

    }, false);

Console output after adding the class

DOMTokenList(4) ["svg-inline--fa", "fa-sync-alt", "fa-w-16", "fa-spin", 
value: "svg-inline--fa fa-sync-alt fa-w-16 fa-spin"]

Console output after removing the class

DOMTokenList(3) ["svg-inline--fa", "fa-sync-alt", "fa-w-16", value: "svg-inline--fa fa-sync-alt fa-w-16"]

Element in the DOM

<svg class="svg-inline--fa fa-sync-alt fa-w-16 fa-spin" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sync-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""></svg>

Answer 1

I tested you Code and it seems to work. You can test the snippet:

 class Paragraph { constructor(items, placement) { this.items = items; this.placement = placement; } create() { this.items.forEach((item) => { const paragraphElem = document.createElement('p'); let placeInUI = document.querySelector(this.placement); paragraphElem.classList.add('resource'); paragraphElem.textContent = item.name; placeInUI.appendChild(paragraphElem); this.implementUpdateIcon(paragraphElem); }); } implementUpdateIcon(paragraphElem) { let spanElem = document.createElement('span'); spanElem.innerHTML = "click me!"; spanElem.classList.add('fas', 'fa-sync-alt'); paragraphElem.append(spanElem); } } window.onload = function() { let x = new Paragraph([{name: 'hello world!'}, {name: 'hello world!'}, {name: 'hello world!'}, {name: 'hello world!'}, {name: 'hello world!'}, {name: 'hello world!'}], '#tms-projects'); x.create(); document.getElementById('version-control-tms').addEventListener('click', event => { if (event.target.classList.contains('fa-sync-alt')) { event.target.classList.add('fa-spin'); // Run some asynchronous code... setTimeout(() => { event.target.classList.remove('fa-spin'); }, 3000); } }, false); }

 span { display: inline-block; background-color: red; } .fa-spin { animation: spin 1s linear infinite; } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }

 <div id="version-control-tms"> <div id="version-control-repos"> <h2>Version control repos</h2> </div> <div id="tms-projects"> <h2>TMS projects</h2> </div> </div>

So the problem seems to be somewhere else.

Things I notice (already changed in the snippet):

• document.createElement('spam') should be document.createElement('span') .
• child.classList.add('fas', 'fa-sync-alt') can be used instead of child.setAttribute('class', 'fas fa-sync-alt') same with paragraph.setAttribute('class', 'resource') . But keep in mind that IE and Opera Mini can't handle multiple classes like so. Maybe two times classList.add is a better solution.
• you can pass the paragraph element directly to the `implementUpdateIcon' function and don't need an index for it:

   implementUpdateIcon (paragraphElem) { let spanElem = document.createElement('span'); spanElem.classList.add('fas', 'fa-sync-alt'); paragraphElem.append(child); }