I have a problem When I delete the letters, the word remains

I have two h1 I delete the word from each h1 and when all the letters are deleted I stop the interval for each h1 specially for it

let mySelector = document.querySelectorAll(".writ-text");
for (let l = 0; l < mySelector.length; l  ) {

  removeText = setInterval(function() {

    // Cut the last letter of the word and print the word after editing
    document.querySelectorAll(".writ-text")[l].textContent =
      document.querySelectorAll(".writ-text")[l].textContent.substr(0,
        document.querySelectorAll(".writ-text")[l].textContent.length - 1);

    // Check if the entire word has been deleted
    if (document.querySelectorAll(".writ-text")[l].textContent.length == 0) {
      clearInterval(removeText)
    }
  }, 1000);
}

<h1 class="writ-text">gold</h1>
<h1 class="writ-text">golder</h1>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You have cleared the only setInterval named removeText(global scoped) which makes it for both text.
Use a block scope like let const to work out

let mySelector = document.querySelectorAll(".writ-text");
for (let l = 0; l < mySelector.length; l  ) {

 let removeText = setInterval(function() {

    // Cut the last letter of the word and print the word after editing
    document.querySelectorAll(".writ-text")[l].textContent =
      document.querySelectorAll(".writ-text")[l].textContent.substr(0,
        document.querySelectorAll(".writ-text")[l].textContent.length - 1);

    // Check if the entire word has been deleted
    if (document.querySelectorAll(".writ-text")[l].textContent.length == 0) {
      clearInterval(removeText)
    }
  }, 1000);
}

<h1 class="writ-text">gold</h1>
<h1 class="writ-text">golder</h1>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>