如何让按钮删除其关联的追加列表元素？代码故障排查

核心问题：箭头函数导致this指向错误 #

删除按钮的点击事件使用了箭头函数，箭头函数不会绑定自身的this，它的this继承自外层作用域（此处外层为添加任务的箭头函数，this指向全局window），因此$(this)并非指向点击的删除按钮，无法通过parent().remove()删除对应的<li>元素。

修复方案 #

方案1：替换箭头函数为普通函数 #

普通函数的this会指向触发事件的元素（即删除按钮），可正确定位并删除父元素：

$(document).ready(function () {
  let counter = 0;

  $("#btn").on("click", () => {
    let task = $("#text").val();
    let deleteBtnId = "delete" + counter;
    let listElement = "<li>"+ task + "<button id="+deleteBtnId+"> X </button></li>";

    $("ul").append(listElement);

    // 将箭头函数改为普通函数
    $("#" + deleteBtnId).on("click", function() {
      $(this).parent().remove();
    });

    counter++;
  });
});

方案2：使用事件委托（更推荐） #

无需为每个删除按钮单独绑定事件，直接给父元素<ul>绑定一次事件，监听所有动态生成的删除按钮点击，代码更简洁高效：

$(document).ready(function () {
  let counter = 0;

  $("#btn").on("click", () => {
    let task = $("#text").val();
    // 用统一类名替代唯一ID，无需维护counter
    let listElement = "<li>"+ task + "<button class='delete-btn'> X </button></li>";
    $("ul").append(listElement);
    counter++;
  });

  // 事件委托：通过父元素监听子元素点击
  $("ul").on("click", ".delete-btn", function() {
    $(this).parent().remove();
  });
});

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