Can't remove list of appended children on click (li elements) - Stopwatch app- Vanilla JS

Question

I have a small project, a stopwatch and what I want to do is:

When you click on "Reset Laps", the list of saved laps disappear

What I tried

1.

function removingLaps() {
  laps.style.display = 'none'
}

and of course it works, but I have another function in the code that you will see from the snippet that limits the number of laps that can be saved to 5. if I just say display: none, the li elements are still existing in the DOM so the function doesn't work.

2.

function removingLaps() {
  laps.remove()
}

but in this case unless you refresh the page, the ul will be gone, so there would be no place to append the lis.

3.

function removingLaps() {
  let lapsToRemove = document.querySelectorAll('.lapsss')
  lapsToRemove.remove()
}

but it says that is not a function. If I try with querySelector instead of querySelectorAll, it works, but it cancel the laps one by one. One click - one lap deleted.

I also tried to get the lis by tag name, but it says that cannot set remove() of null.

I really don't know what else to try.

The Snippet

let container = document.querySelector('.container')

let start = document.querySelector('.start')
let pause = document.querySelector('.pause')
let reset = document.querySelector('.reset')
let laps = document.querySelector('.laps')
let lapCrono = document.querySelector('.lapcrono')
let resetLaps = document.querySelector('.resetlaps')

let timer

let m = 0
let s = 0
let ms = 0

//START button **************
function runCrono(){
  container.innerText = (m<10?'0'+m:m) + ':' + (s<10?'0'+s:s) + ':' + (ms<10?'0'+ms:ms)
  ms++

  if(ms == 100) {
    ms = 0
    s++
  }

  if(s == 60) {
    s = 0
    m++
  }
}

start.addEventListener('click', ()=> {
  if(!timer) {
    timer = setInterval(runCrono, 10)
  }
  

})



//Lap button *************+
function lap() {
  let li = document.createElement('li')
  if(timer) {
    li.innerText = (m<10?'0'+m:m) + ' : ' + (s<10?'0'+s:s) + ' : ' + (ms<10?'0'+ms:ms)
    laps.appendChild(li)
    li.setAttribute('class', 'lapsss')
  }
  
  if(document.getElementsByTagName('li').length >= 5){
    lapCrono.disabled = true
  }
}

lapCrono.addEventListener('click', ()=> {
  lap()
  })


//PAUSE button ***************
pause.addEventListener('click', ()=> {
  clearInterval(timer)
  timer = false
})



//Reset Button ****************
reset.addEventListener('click', ()=> {
  container.innerText = '00:00:00'

  clearInterval(timer)
  timer = false
})

//Reset Laps*******************
resetLaps.addEventListener('click', ()=> {
  removingLaps()
  lapCrono.disabled = false
})

  
function removingLaps() {
  let lapsToRemove = document.getElementsByTagName('li')
  lapsToRemove.remove()
}

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

body, html {
  background: url(speed.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-position: center;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
  margin-bottom: 3em;
  border: 1px solid black;
  font-size: 3em;
  margin-top: 1em;
  font-family: verdana; 
}

.outcontainer {
  border: 1px solid black;
  width: 90vw;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20vh;
  left: 50vw;
  transform: translate(-50%);
  
}

<div class="outcontainer">
    <div class="container">00:00:00</div>

    <div class="buttons">
      <button class="start">Start</button>
      <button class="lapcrono">Lap</button>
      <button class="pause">Pause</button>
      <button class="reset">Reset</button>
      <button class="resetlaps">Reset Laps</button>
    </div>

    <ul class="laps">
      
    </ul>
  </div>
  
  <script src="main.js"></script>

`document.getElementsByTagName('li')` returns a collection, not a single element, so `lapsToRemove.remove()` will not work. Check the browser console, you will see the error in the console. — Yousaf, Oct 20 '20 at 11:44
I know it doesn't work, but that was just another thing I tried — Mailer, Oct 20 '20 at 11:46
Another problem is that you do not call `removingLaps` function when the reset button is clicked. Here's a working [Demo](https://jsbin.com/gihipulada/1/edit?js,output). — Yousaf, Oct 20 '20 at 11:50
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Oct 20 '20 at 11:51
The duplicate posted above shows how to work with the output of `querySelectorAll`; that is, loop over the results. — Heretic Monkey, Oct 20 '20 at 11:52
@Yousaf YES!!!! How I didn't think of empty innerHTML. jeez, thanks a lot!! "Reset" button is only for the timer anways... — Mailer, Oct 20 '20 at 11:58

Nathan Chu · Answer 1 · 2020-10-20T12:15:22.520

1

You were close with the following code:

function removingLaps() {
  let lapsToRemove = document.querySelectorAll('.lapsss')
  lapsToRemove.remove()
}

The problem is that document.querySelectorAll will return an array of HTML elements, not all of them at once. A solution would be something like the following:

function removingLaps() {
  document.querySelectorAll('.lapsss').forEach(e => e.remove())
}

This works by selecting the array of laps, and for each element it calls the function with the element passed as the argument. It is functionally equivalent to this for loop:

function removingLaps() {
  let lapsToRemove = document.querySelectorAll('.lapsss')
  for (let i = 0; i < lapsToRemove.length; i++) {
      lapsToRemove[i].remove()
  }
}

edited Oct 20 '20 at 12:15

answered Oct 20 '20 at 11:56

Nathan Chu

635
1
3
19

"for loops are generally slower than most native functions"... citation needed. If I were you, I'd leave blanket statements like that out of answers without proof to back them up... – Heretic Monkey Oct 20 '20 at 12:05
[Javascript efficiency: 'for' vs 'forEach'](https://stackoverflow.com/a/43032526) – Yousaf Oct 20 '20 at 12:10
@Yousaf interesting, I will add that in. – Nathan Chu Oct 20 '20 at 12:12
I think you don't need to mention about the performance difference between `for` loop and `forEach`. – Yousaf Oct 20 '20 at 12:13
@Yousaf ok, I'll remove it – Nathan Chu Oct 20 '20 at 12:15

54ka · Answer 2 · 2020-10-20T17:02:49.147

I used the code from your previous post!!! I think I did what you asked.

Lap - When the laps become 5 - the sixth is recorded in place of the first and so the records are scrolled indefinitely.
Reset Laps - is Done

let container = document.querySelector('.container')

let start = document.querySelector('.start')
let pause = document.querySelector('.pause')
let reset = document.querySelector('.reset')
let laps = document.querySelector('.laps')
let lapCrono = document.querySelector('.lapcrono')
let resetLaps = document.querySelector('.resetlaps')

let timer

let m = 0
let s = 0
let ms = 0

//START button **************
function runCrono() {
    container.innerText = (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s) + ':' + (ms < 10 ? '0' + ms : ms)
    ms++

    if (ms == 100) {
        ms = 0
        s++
    }

    if (s == 60) {
        s = 0
        m++
    }
}

start.addEventListener('click', () => {
    if (!timer) {
        timer = setInterval(runCrono, 10)
    }
})



//Lap button *************
var limitLaps = 0;
function lap() {

    var x = document.getElementsByClassName('laps')[0];
    var y = x.children;

    if (limitLaps < 5) {
        limitLaps++;
    } else {
        limitLaps = 0;
    }

    if (y.length < 5) {
        var li = document.createElement('li');
        if (timer) {
            li.innerText = (m < 10 ? '0' + m : m) + ' : ' + (s < 10 ? '0' + s : s) + ' : ' + (ms < 10 ? '0' + ms : ms)
            laps.appendChild(li);
        }
    } else {
        var li = y[limitLaps];
        if (li === undefined) { limitLaps = 0; var li = y[0]; }
        if (timer) {
            li.innerText = (m < 10 ? '0' + m : m) + ' : ' + (s < 10 ? '0' + s : s) + ' : ' + (ms < 10 ? '0' + ms : ms)
        }
    }
}

lapCrono.addEventListener('click', () => {
    lap()
})

console.log(document.getElementsByTagName('li').length)

//PAUSE button ***************
pause.addEventListener('click', () => {
    clearInterval(timer)
    timer = false
    start.innerText = 'Start'

})



//Reset Button ****************
reset.addEventListener('click', () => {
    container.innerText = '00:00:00'

    clearInterval(timer)
    timer = false
})

//Reset Laps*******************
resetLaps.addEventListener('click', () => {
    laps.innerHTML = '';
})

if (laps.length >= 5) {
    clearInterval(timer)
    timer = false
}

body,
html {
    background: url(speed.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-position: center;
    overflow: hidden;
}

.container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto;
    margin-bottom: 3em;
    border: 1px solid black;
    font-size: 3em;
    margin-top: 1em;
    font-family: verdana;
}

.outcontainer {
    border: 1px solid black;
    width: 90vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20vh;
    left: 50vw;
    transform: translate(-50%);

}

<div class="outcontainer">
    <div class="container">00:00:00</div>

    <div class="buttons">
        <button class="start">Start</button>
        <button class="lapcrono">Lap</button>
        <button class="pause">Pause</button>
        <button class="reset">Reset</button>
        <button class="resetlaps">Reset Laps</button>
    </div>

    <ul class="laps">

    </ul>
</div>

<script src="main.js"></script>

When you get enough ratings to be able to vote, I will be happy to give me a positive rating on this post! Good luck with the project, @Mailer ! :) — 54ka, Oct 29 '20 at 07:45

Can't remove list of appended children on click (li elements) - Stopwatch app- Vanilla JS

2 Answers2