时间戳

首页 > 解决方案 > 无法在单击时删除附加子项列表（li 元素）-秒表应用程序-Vanilla JS

javascript - 无法在单击时删除附加子项列表（li 元素）-秒表应用程序-Vanilla JS

问题描述

我有一个小项目，一个秒表，我想做的是：

当您单击“重置圈数”时，已保存圈数列表消失

我试过的

1.

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

当然它可以工作，但是我在代码中有另一个函数，您将从代码段中看到将可以保存的圈数限制为 5。如果我只是说display: none，li元素仍然存在于 DOM 中，所以函数不起作用。

2.

function removingLaps() {
  laps.remove()
}

但在这种情况下，除非您刷新页面，否则sul将消失，因此没有地方可以附加lis。

3.

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

但它说这不是一个功能。如果我尝试使用querySelector而不是querySelectorAll，它可以工作，但它会一一取消圈数。一键删除一圈。

我也尝试li通过标签名称获取 s，但它说不能设置remove()为 null。

我真的不知道还能尝试什么。

片段

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>

标签： javascript

解决方案

您与以下代码很接近：

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

问题是它document.querySelectorAll会返回一个 HTML 元素数组，而不是一次返回所有元素。解决方案类似于以下内容：

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

这通过选择圈数数组来工作，并且对于每个元素，它都会调用函数，并将元素作为参数传递。它在功能上等同于这个 for 循环：

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

推荐阅读