javascript - JavaScript可靠的创建和删除功能

我正在尝试开发CRUD工具。但是，我用来实现此目的的逻辑是有问题的。您可以找到我的full JSFiddle in this link。

我的HTML看起来像这样：

<p class="remu">Fish 0</p>
<p class="remu">Fish 1</p>
<p class="remu">Fish 2</p>
<div id="moregohere"></div>
<p id="generator">Generator</p>

单击remu时，应删除相应的p类。由于某种原因，单击最后一个remu错误。 cannot read property 'remove' of undefined。不知道为什么会这样。

但是，这里还有另一个问题。也就是说，当我单击generator时，我想生成一个remu，可以通过单击将其删除，其方式与已经生成的remu相同。

问题在于，生成的(function(i){//function here}(i))有时会停止响应我的点击。我的结论是，将函数包装在remove()中只会使其与DOM创建中已经存在的任何函数相对应。

这也很有意义，因为我正在使用协议从已删除的DOM元素中删除。但是我的脚本确实不能很好地工作。

供参考，我的代码：

var remu = document.getElementsByClassName("remu");
var generator = document.getElementById("generator");
var moregohere = document.getElementById("moregohere");

generator.addEventListener('click', function() {
  moregohere.innerHTML += "<p class='remu'>Added Fish</p>";
  removal();
});

removal();

function removal() {
  for (i = 0; i < remu.length; i++) {
    (function(i) {
      remu[i].addEventListener('click', function() {
        remu[i].remove();
      });
    }(i));
  }
}

<p class="remu">Fish 0</p>
<p class="remu">Fish 1</p>
<p class="remu">Fish 2</p>
<div id="moregohere"></div>
<p id="generator">Generator</p>

最佳答案

您不需要那种IIFE方法，只需绑定事件click。
使用this.remove()而不是remu[i].remove()来避免变量i范围问题。

var remu = document.getElementsByClassName("remu");
var generator = document.getElementById("generator");
var moregohere = document.getElementById("moregohere");

generator.addEventListener('click', function() {
  moregohere.innerHTML += "<p class='remu'>Added Fish</p>";
  removal();
});

removal();

function removal() {
  for (var i = 0; i < remu.length; i++) {
    remu[i].addEventListener('click', function() {
      this.remove();
    });
  }
}

<p class="remu">Fish 0</p>
<p class="remu">Fish 1</p>
<p class="remu">Fish 2</p>
<div id="moregohere"></div>
<p id="generator">Generator</p>