Javascript 删除元素后更新数组长度

免责声明：我是一个彻头彻尾的傻瓜。请容忍我；）

我正在做一个小项目，使用CSS动画和JS操作DOM。通过单击动画元素，它们将从DOM中删除。 删除所有项目后，将添加视频元素

后者是我正在努力解决的问题。元素从DOM中删除，但cat数组的长度不会得到更新，因此永远不会达到0（添加视频时）。 这是我的项目摘录：

（注：如果有人能帮我找出原因。cat:hover{transform:rotate（360deg）；}在我的CSS文件中不起作用，我将永远感激）

对于（i=0；i

在这种情况下，您应该使用

array.splice（）

方法

它需要两个参数。首先-开始索引（在您的例子中是i）和要删除的元素数

您可以在此处阅读：

for（i=0；i

使用“i”可以获得要删除的数组索引，因此可以对数组使用方法splice，例如：

var array= ["hi", "everything", "ok"];
array.splice(1,1) //the first parameter is the index and the second is the number of elements that you want delete.

编辑：

for (i = 0; i < cat.length; i++) {
  cat[i].addEventListener('click', function() {
    this.parentNode.removeChild(this);
    cat.splice(i,1);

  });
}
if (cat.length === 0) {
  const iframe = document.createElement("iframe");
  iframe.src = "https://www.youtube.com/embed/SB-qEYVdvXA";
  iframe.width = "560";
  iframe.height = "315";
  document.getElementById("wrapper").appendChild(iframe);
}

for（i=0；i

在这种情况下，最好使用

HTMLCollection

这是DOM上的实时视图，而不是从

querySeletorAll

返回的静态节点列表

另外，javascript不是被动的，所以当

cat

为空时，

if（cat.length==0）{…}

中的代码不会神奇地运行。发生这种情况时，您必须自己称呼它：

const cat=document.getElementsByClassName（“cat”）；
for（设i=0；i

如果有人能帮我找出原因。cat:hover{transform:rotate（360deg）；}不起作用

您正在动画和

中使用
transform
。cat:hover

。CSS声明相互覆盖。您可以使用

top

属性在动画中移动猫（该属性的性能不如

transform:translate

），但我看不到任何其他方法可以使用

transform:rotate

@关键帧运动{
到{top:1500px}
}

您必须在

onClick

函数中添加长度检查。每次单击时，您必须检查长度，但数组的最后一个元素不一定是已单击的项目。我如何区分它？如果我不知道数组的哪个元素是我将被用户随机点击？您的函数中有索引号。现在我重新发布解决方案。非常感谢！这就像一个魅力，感谢您的解释，我能够理解它：）

for (i = 0; i < cat.length; i++) {
  cat[i].addEventListener('click', function() {
    this.parentNode.removeChild(this);
    cat.splice(i,1);

  });
}
if (cat.length === 0) {
  const iframe = document.createElement("iframe");
  iframe.src = "https://www.youtube.com/embed/SB-qEYVdvXA";
  iframe.width = "560";
  iframe.height = "315";
  document.getElementById("wrapper").appendChild(iframe);
}