AJAX删除MySQL行后，如何用jQuery按ID移除对应UL LI元素？

问题根源 #

1. 重复ID冲突：HTML中<li>标签和删除按钮共用了同一个id值（$rowinc['id']），但HTML规范要求页面内ID必须唯一，这会导致jQuery选择器无法准确定位目标元素。
2. 选择器语法错误：AJAX成功回调里的$('#id li').remove()是无效写法，它试图选择id为id的元素下的li，而非对应ID的目标li元素。

修复步骤 #

1. 修正HTML结构，消除重复ID #

将删除按钮的id属性替换为data-id，保留<li>标签的唯一ID：

echo '<li class="delli" id="'.$rowinc['id'].'">
        <button class="fl delbutton" onclick="">'.  $rowinc['memo'].'</button>
        <span class="fr">
        <button>'. $rowinc['amount'].'</button>
        <button class="delbutton" data-id="'.$rowinc['id'].'">
        <i class="fa fa-trash">'.$rowinc['id'].'</i>
        </button>
        </span>
      </li> ';

2. 修正jQuery代码，正确移除目标li #

修改AJAX成功回调的选择器逻辑，通过data-id获取ID并定位对应li：

$(document).ready(function() {
  $('.delbutton').click(function() {
    var itemId = $(this).data('id');
    if (confirm("Are you sure you want to delete this entry?")) {
      $.ajax({
        type: "POST",
        url: "delete_entry.php",
        data: { id: itemId },
        cache: false,
        success: function() {
          // 直接移除对应ID的li元素
          $('#' + itemId).remove();
          // 也可以通过按钮向上查找父级li：$(this).closest('li').remove();
        }
      });
    } else {
      return false;
    }
  });
});

额外优化：事件委托（适配动态添加元素） #

如果后续会动态新增收入项，建议用事件委托绑定点击事件，确保新生成的元素也能触发删除逻辑：

$(document).ready(function() {
  $('ul').on('click', '.delbutton', function() {
    var itemId = $(this).data('id');
    if (confirm("Are you sure you want to delete this entry?")) {
      $.ajax({
        type: "POST",
        url: "delete_entry.php",
        data: { id: itemId },
        cache: false,
        success: function() {
          $('#' + itemId).remove();
        }
      });
    } else {
      return false;
    }
  });
});

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