Javascript 单击按钮从数组中删除相关的DOMTokenList项

我正在尝试找出如何通过单击按钮从数组中删除项目。我已经知道了如何将物品推送到阵列中，但是移除它却变得更加困难。JS代码如下：

let sideArray = [];
let sideButtons = document.querySelectorAll('div.side-buttons button');

for (let i = 0; i < sideButtons.length; i++) {
  if(sideButtons[i].textContent !== "RANDOM" ) {
    sideButtons[i].onclick = function (e) {
      //alert (this.innerHTML)

    this.classList.toggle('on');
    let tokenNum = this.className[0] + this.className[1];
    let index = sideArray.indexOf(tokenNum);
    if (this.classList.contains('on')) {

      sideArray.push(+(tokenNum));
      
      sortNumbers(sideArray);
      console.log(tokenNum);
      console.log(index);
      console.log(sideArray);

    } else if (!this.classList.contains('on')) {


      sideArray.splice(index, 1)
      sortNumbers(sideArray);
      console.log(sideArray);
    }
      let buttonHTML = this.textContent;

      //link to create choice button function
      //choiceButtons(buttonHTML)
    }
  }
}


function sortNumbers(array) {
  array.sort(function(a, b) {
    return a - b;
  });
}

let sideArray=[]；
让sideButtons=document.queryselectoral（'div.side-buttons'）；
for（设i=0；i

每个按钮都有一个数字作为一个类，帮助我遍历它们。一旦我在单击时将相关编号按入数组，我想在第二次单击按钮时从数组中删除相关编号。 你能帮忙吗

编辑：无论单击哪个按钮，拼接方法都会删除阵列中的最后一个元素

---

以下是我的完整代码：

主要问题是您收集令牌的方式

您试图收集button类的第一个和第二个字符，但通常只有第一个字符，没有第二个字符，因此会生成一个类似

4undefined

的字符串。我们可以通过正则表达式检索令牌来解决这个问题，允许使用任意数量的字符（1、2、6891，随便什么）

我已经修复了这个问题，还重构了您的代码。这将取代

for

循环。我已经委派了这些活动，还删除了一些不必要的重复

document.body.addEventListener('click', evt => {
    if (!evt.target.matches('div.side-buttons button') || evt.target.textContent == 'RANDOM') return;
    evt.target.classList.toggle('on');
    let tokenNum = evt.target.className.match(/\d+/); //<-- better way of getting token
    if (evt.target.classList.contains('on'))
        sideArray.push(tokenNum[0]);
    else {
        let index = sideArray.indexOf(tokenNum[0]); //<-- need this only in the else block, not if
        sideArray.splice(index, 1)
    }
    sortNumbers(sideArray);
    let buttonHTML = evt.target.textContent; //<-- you don't currently do anything with this
});

document.body.addEventListener（'click'，evt=>{
如果（！evt.target.matches（'div.side-buttons button'）| | evt.target.textContent=='RANDOM'）返回；
evt.target.classList.toggle（'on'）；
让tokenNum=evt.target.className.match（/\d+/）；/主要问题是收集令牌的方式

您试图收集按钮类的第一个字符和第二个字符，但通常只有第一个字符-没有第二个字符-因此这会生成一个类似
4undefined
的字符串。我们可以通过正则表达式检索令牌来解决这一问题，允许使用任意数量的字符（1、2、6891，等等）

我已经修复了这个问题，还重构了你的代码。这将替换你的
for
循环。我已经委派了事件，还删除了一些不必要的重复

document.body.addEventListener('click', evt => {
    if (!evt.target.matches('div.side-buttons button') || evt.target.textContent == 'RANDOM') return;
    evt.target.classList.toggle('on');
    let tokenNum = evt.target.className.match(/\d+/); //<-- better way of getting token
    if (evt.target.classList.contains('on'))
        sideArray.push(tokenNum[0]);
    else {
        let index = sideArray.indexOf(tokenNum[0]); //<-- need this only in the else block, not if
        sideArray.splice(index, 1)
    }
    sortNumbers(sideArray);
    let buttonHTML = evt.target.textContent; //<-- you don't currently do anything with this
});

document.body.addEventListener（'click'，evt=>{
如果（！evt.target.matches（'div.side-buttons button'）| | evt.target.textContent=='RANDOM'）返回；
evt.target.classList.toggle（'on'）；
让tokenNum=evt.target.className.match（/\d+/）；//我通过使用这个.className.split（“”）来解决DOMTokenList中连接元素的问题。它与我的原始代码相同，只是：

for (let i = 0; i < sideButtons.length; i++) {
  if(sideButtons[i].textContent !== "RANDOM" ) {
    sideButtons[i].onclick = function (e) {
    let textContent = this.textContent;

    this.classList.toggle('on');
    let classArray = this.className.split(' ')
    let buttonNum = +(classArray[0]);
    let index = sideArray.indexOf(buttonNum);
    if (this.classList.contains('on')) {
      sideArray.push(buttonNum);
      sortNumbers(sideArray);
      console.log(sideArray);
      orderButtons(sideArray, textContent);//*FOR SPLICING intervalArray

    } else {
      sideArray.splice(index, 1);
      orderButtons(sideArray);
      console.log(sideArray);
    }
  }
 }
}

for（设i=0；i
我通过使用这个.className.split（“”）解决了DOMTokenList中连接元素的问题。它与我的原始代码相同，只是：

for (let i = 0; i < sideButtons.length; i++) {
  if(sideButtons[i].textContent !== "RANDOM" ) {
    sideButtons[i].onclick = function (e) {
    let textContent = this.textContent;

    this.classList.toggle('on');
    let classArray = this.className.split(' ')
    let buttonNum = +(classArray[0]);
    let index = sideArray.indexOf(buttonNum);
    if (this.classList.contains('on')) {
      sideArray.push(buttonNum);
      sortNumbers(sideArray);
      console.log(sideArray);
      orderButtons(sideArray, textContent);//*FOR SPLICING intervalArray

    } else {
      sideArray.splice(index, 1);
      orderButtons(sideArray);
      console.log(sideArray);
    }
  }
 }
}

for（设i=0；i
Sidenote:将这样的数据存储为类并不理想，因为您可能无法依赖于类的顺序，其中设置了多个类。最好使用
data-*
属性作为索引。从您的小提琴中可以看出，没有问题。在
splice（）之后，该项将根据需要从数组中删除
调用。此外，您的
else if
块可以是
else
，因为它表示
if
块的逻辑相反。感谢查看，Mitya。它确实删除了一个项，但它始终是数组中的最后一个元素。我需要该元素与按钮的编号相对应。旁注：存储像这样的数据作为一个类是不理想的，因为您可能无法依赖于类的顺序，其中设置了多个类。最好使用
data-*
属性作为索引。从您的小提琴中可以看出，没有问题。在
splice（）之后，该项将根据需要从数组中删除
打电话。此外，如果<