移除HTML元素时事件未触发，求数据库删除及ID保存方案

首先，咱们得搞清楚为什么你绑定的remove事件没触发：jQuery的remove事件仅仅在你通过jQuery的.remove()方法主动调用移除元素时才会触发，而你用退格/删除键这种原生DOM操作（比如在可编辑区域里删除元素），并不会触发这个事件——这就是问题的核心所在。

接下来针对你的两个需求，给你两个可行的解决方案：

方案一：用MutationObserver监听元素移除（通用场景） #

这个方案不管元素是通过键盘删除、原生DOM操作还是jQuery方法移除，都能精准捕捉到，是最可靠的方式。它利用原生的MutationObserver API监听DOM变化，当元素被移除时执行你的AJAX删除逻辑，同时自然能拿到元素的ID：

// 选中所有需要监听的<a>元素
const targetLinks = document.querySelectorAll('a');

// 创建MutationObserver实例，处理DOM变化
const removalObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有被移除的节点
    mutation.removedNodes.forEach((removedNode) => {
      // 确认被移除的是我们的<a>标签且带有ID
      if (removedNode.tagName === 'A' && removedNode.id) {
        const aId = removedNode.id;
        // 执行你的AJAX删除请求
        $.ajax({
          url: `/annotations/${aId}`,
          method: 'DELETE',
          headers: {'X-CSRF-Token': csrf_token},
          dataType: 'json',
          success: function (response) {
            console.log(`SUCCESS: ${response}`);
          },
          error: function (jqXHR, exception) {
            let msg = '';
            if (jqXHR.status === 0) {
              msg = 'Not connect. Verify Network.';
            } else if (jqXHR.status == 404) {
              msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
              msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
              msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
              msg = 'Time out error.';
            } else if (exception === 'abort') {
              msg = 'Ajax request aborted.';
            } else {
              msg = `Uncaught Error.\n${jqXHR.responseText}`;
            }
            console.log(`ERROR: ${msg}`);
          },
        });
      }
    });
  });
});

// 配置观察规则：监听子节点的移除，同时监听整个子树
const observerConfig = { childList: true, subtree: true };

// 给每个<a>元素的父节点添加监听（因为元素被移除是从父节点的子列表中消失）
targetLinks.forEach(link => {
  if (link.parentNode) {
    removalObserver.observe(link.parentNode, observerConfig);
  }
});

方案二：针对contenteditable场景的键盘事件监听 #

如果你的元素是在contenteditable的编辑区域内（这是退格删除元素的常见场景），你可以结合键盘事件提前获取要删除的元素ID，再验证元素是否真的被删除：

// 假设你的可编辑区域ID是editable，替换成你实际的选择器
$('#editable').on('keydown', function(e) {
  // 监听退格键（keyCode 8）和删除键（keyCode 46）
  if (e.keyCode === 8 || e.keyCode === 46) {
    const selection = window.getSelection();
    // 获取当前选中的元素
    const selectedElement = selection.anchorNode?.parentElement;
    if (selectedElement?.tagName === 'A' && selectedElement.id) {
      const aId = selectedElement.id;
      // 因为键盘事件触发在元素删除之前，所以延迟一点检查元素是否存在
      setTimeout(() => {
        if (!document.getElementById(aId)) {
          // 元素已被删除，执行AJAX请求
          $.ajax({
            url: `/annotations/${aId}`,
            method: 'DELETE',
            headers: {'X-CSRF-Token': csrf_token},
            dataType: 'json',
            success: function (response) {
              console.log(`SUCCESS: ${response}`);
            },
            error: function (jqXHR, exception) {
              let msg = '';
              if (jqXHR.status === 0) {
                msg = 'Not connect. Verify Network.';
              } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
              } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
              } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
              } else if (exception === 'timeout') {
                msg = 'Time out error.';
              } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
              } else {
                msg = `Uncaught Error.\n${jqXHR.responseText}`;
              }
              console.log(`ERROR: ${msg}`);
            },
          });
        }
      }, 100);
    }
  }
});

关键总结 #

1. 原生DOM移除元素不会触发jQuery的remove事件，只有$(element).remove()调用才会触发；
2. 保存ID的需求：两种方案都能在元素移除时（或确认移除后）拿到ID，MutationObserver的方式更通用，键盘事件更适合特定的编辑场景。

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