jQuery动态列表移除按钮失效问题解析与解决方案

if ($(".remove-title").length) {
  $("body").on("click", ".remove-title", function() {
    console.log("clicked");
    $(this).parents(".btn-options"); // 仅仅选中了父元素，但没有对其进行任何操作
  });
}

$("body").on("click", ".remove-title", function() {
  console.log("Remove button clicked.");
  var $this = $(this);
  var parentTitleArea = $this.parents(".title-area"); // 找到最近的.title-area父元素
  parentTitleArea.remove(); // 移除整个.title-area容器
});

$("body").on("click", ".remove-title", function() {
  console.log("Remove button clicked.");
  var $this = $(this);
  var parentTitleArea = $this.parents(".title-area");

  // 检查是否是最后一个列表项
  if (!parentTitleArea.siblings(".title-area").length) {
    // 如果是最后一个，触发添加按钮的点击事件，确保至少有一个列表项
    $this.siblings(".add-title").trigger("click");
  }

  // 获取即将移除的标题文本，用于用户反馈
  var title = parentTitleArea.find("input.title-text").eq(0).val();

  // 移除当前列表项
  parentTitleArea.remove();

  // 可选：显示移除成功的提示信息
  // 注意：这里的toast元素需要预先存在于DOM中，例如在btn-options div内
  var toast = $(".btn-options").find(".btn-toast"); // 假设toast在某个公共位置
  if (toast.length) {
      toast.show().html("标题已移除: <span>" + title + "</span>")
           .delay(400).fadeOut("slow");
  }
});

<div class="btn-options">
    <!-- 其他按钮或元素 -->
    <div class="btn-toast" style="display: none;"></div>
</div>

// ... (事件委托和边界条件处理同上)

// 获取即将移除的标题文本
var title = parentTitleArea.find("input.title-text").eq(0).val();

// 移除当前列表项
parentTitleArea.remove();

// 显示Toast提示
var toast = $(".btn-options").find(".btn-toast"); // 确保选中正确的toast元素
if (toast.length) {
    toast.show().html("标题已移除: <span>" + title + "</span>")
         .delay(400).fadeOut("slow");
}

$(document).ready(function() {
  // 添加新列表项的逻辑（假设已存在）
  $("body").on("click", ".add-title", function() {
    var newTitleArea = `
      <div class="title-area">
        <div class="form-group">
          <label>Title</label>
          <input type="text" class="form-control title-text" placeholder="Enter title">
        </div>
        <div class="btn-options">
          <button type="button" class="btn btn-primary add-title">Add Title</button>
          <button type="button" class="btn btn-danger remove-title">Remove Title</button>
        </div>
      </div>
    `;
    $(this).parents(".title-area").after(newTitleArea); // 在当前项后添加
  });

  // 移除列表项的逻辑
  $("body").on("click", ".remove-title", function() {
    console.log("Remove button clicked.");
    var $this = $(this);
    var parentTitleArea = $this.parents(".title-area");

    // 获取即将移除的标题文本，用于用户反馈
    var title = parentTitleArea.find("input.title-text").eq(0).val();
    if (!title) { // 如果标题为空，给一个默认值
        title = "空标题";
    }

    // 检查是否是最后一个列表项
    if (!parentTitleArea.siblings(".title-area").length) {
      // 如果是最后一个，触发添加按钮的点击事件，确保至少有一个列表项
      // 这里需要确保 .add-title 按钮存在于正确的位置，例如在父容器的兄弟元素中
      // 或者在页面某个固定位置有一个“全局”的add-title按钮
      // 为了简化，这里假设当前点击的remove-title按钮旁边有add-title按钮
      $this.siblings(".add-title").trigger("click");
    }

    // 移除当前列表项
    parentTitleArea.remove();

    // 显示Toast提示
    // 假设页面中有一个用于显示Toast的容器，例如在body的某个位置
    // 或者每个title-area的btn-options内有一个toast div
    // 这里我们使用一个假设的全局或靠近按钮的toast容器
    var toastContainer = $(".btn-options").find(".btn-toast"); // 假设toast在btn-options内
    if (toastContainer.length) {
        toastContainer.show().html("标题已移除: <span>" + title + "</span>")
                      .delay(400).fadeOut("slow");
    } else {
        // 如果没有找到特定的toast容器，可以创建一个简单的临时toast
        $('body').append('<div class="temp-toast" style="position:fixed; bottom:20px; right:20px; background-color:#333; color:#fff; padding:10px; border-radius:5px; z-index:9999;">标题已移除: <span>' + title + '</span></div>');
        $('.temp-toast').delay(400).fadeOut("slow", function(){ $(this).remove(); });
    }
  });
});