循环中Closures失效：删除元素触发TypeError报错求助

我一眼就看出问题出在哪了——这确实和闭包特性以及动态DOM集合的坑有关，咱们一步步拆解修复：

问题根源分析 #

1. createPoindetDel函数的隐性缺陷：

   • 你在循环里用了立即执行函数(IIFE)，但没有收集生成的pointDel元素，而是依赖后续通过getElementsByClassName('deleting')获取。但getElementsByClassName返回的是动态HTMLCollection——当DOM元素被删除时，这个集合会自动更新，直接导致索引混乱。
   • 原函数里的return pointDel完全没用，因为它是在IIFE内部返回，外层循环根本没接收这个返回值。

2. 闭包与动态集合的冲突：

   • 在getDelete的循环中，你通过IIFE捕获了j，但绑定事件时同时操作text[j]和p[j]。当你先删除text[j]（父元素），p[j]作为子元素会被自动移除，此时动态集合p的长度减少，后续的索引就会对应到不存在的元素，触发undefined错误。
   • 更稳妥的方式是直接在事件中通过this获取当前点击的pointDel元素，再找到它的父元素text-block，完全不用依赖索引。

修复后的代码实现 #

1. 修复createPoindetDel函数 #

让它返回生成的pointDel数组，彻底摆脱动态DOM集合的困扰：

function createPoindetDel(text) {
  const pointDelList = []; // 专门收集生成的删除按钮
  for (var i = 0; i < text.length; i++) {
    (function(i) {
      var textCoords = text[i].getBoundingClientRect();
      var pointDel = document.createElement('p');
      pointDel.innerHTML = '[x]';
      pointDel.className = 'deleting';
      pointDel.style.top = textCoords.top + pageYOffset + 'px';
      pointDel.style.left = textCoords.right + pageXOffset + 'px';
      text[i].appendChild(pointDel);
      pointDelList.push(pointDel); // 将按钮添加到数组中
    })(i);
  }
  return pointDelList; // 返回收集好的按钮数组
}

2. 修复getDelete函数 #

使用返回的按钮数组，通过this获取当前点击元素，彻底消除索引依赖：

function getDelete() {
  var text = document.getElementsByClassName('text-block');
  const pList = createPoindetDel(text); // 直接拿到生成的按钮数组
  for (var j = 0; j < text.length; j++) {
    (function(j) {
      pList[j].addEventListener('click', function() {
        // 通过this获取当前点击的删除按钮，直接移除它的父元素
        this.parentElement.remove();
        // 按钮会随父元素一起被DOM回收，不需要单独删除
      });
    })(j);
  }
}
getDelete();

完整的HTML/CSS/JS代码 #

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.text-block { 
  max-width: 500px; 
  height: auto; 
  padding: 20px; 
  border-top: 2px #C4DF9B solid; 
  background-color: #EDF5E1; 
  margin-bottom: 0;
  position: relative; /* 新增：让删除按钮的绝对定位基于父元素，避免滚动偏移 */
}
.text-block span { 
  font-size: 18px; 
  font-weight: bold; 
  color: #111; 
  margin-top: 0; 
}
.text-block p { 
  font-size: 15px; 
  margin-bottom: 0; 
  color: #111; 
}
.deleting { 
  position:absolute; 
  top: 10px; 
  right: 10px; /* 调整为基于父元素的定位，比原方式更可靠 */
  margin:0px; 
  cursor:pointer; 
}
</style>
</head>
<body>
<div class="text-block">
<span>Horse</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
</div>
<div class="text-block">
<span>Pig</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
</div>
<div class="text-block">
<span>Mule</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
</div>
<script>
function createPoindetDel(text) {
  const pointDelList = [];
  for (var i = 0; i < text.length; i++) {
    (function(i) {
      var textCoords = text[i].getBoundingClientRect();
      var pointDel = document.createElement('p');
      pointDel.innerHTML = '[x]';
      pointDel.className = 'deleting';
      pointDel.style.top = textCoords.top + pageYOffset + 'px';
      pointDel.style.left = textCoords.right + pageXOffset + 'px';
      text[i].appendChild(pointDel);
      pointDelList.push(pointDel);
    })(i);
  }
  return pointDelList;
}

function getDelete() {
  var text = document.getElementsByClassName('text-block');
  const pList = createPoindetDel(text);
  for (var j = 0; j < text.length; j++) {
    (function(j) {
      pList[j].addEventListener('click', function() {
        this.parentElement.remove();
      });
    })(j);
  }
}
getDelete();
</script>
</body>
</html>

额外优化说明 #

• 给.text-block添加了position: relative，让删除按钮的绝对定位更稳定，避免页面滚动后位置偏移。
• 移除了单独删除pointDel的代码，因为当父元素text-block被移除时，子元素会自动被DOM回收，不需要额外操作。
• 使用数组存储生成的删除按钮，彻底避免了动态HTMLCollection的索引混乱问题。

内容的提问来源于stack exchange，提问作者Sviat Kuzhelev