通过AJAX删除数据库对象后，DOM删除操作报错求助

我一眼就看出问题出在DOM选择器的变量拼接错误上，导致你始终找不到要删除的表格行。咱们一步步来解决：

核心问题：选择器中的变量没有正确解析 #

你原来的代码里，tbody.querySelector('tr[data-id=dataId]') 中的 dataId 是作为字符串字面量被解析的——浏览器会傻愣愣地去找 data-id="dataId" 的行，而不是你传入的实际ID值。你后来尝试的写法也没正确使用模板字符串语法，自然还是找不到元素。

修复后的代码 #

把选择器改成模板字符串形式，正确插入id变量：

function removeFriend(id){
 let dataId = `${id}`
 $.ajax({
 type: 'POST',
 url: `/delete/friend`,
 data: {
 friend_id: `${id}`,
 csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
 action: 'post'
 },
 success: function(json){
 let tbody = document.querySelector('tbody');
 // 用模板字符串把id变量插入到选择器中，生成正确的匹配规则
 let row = tbody.querySelector(`tr[data-id="${id}"]`);
 if(row){ // 先判断元素是否存在，避免触发新的报错
   row.remove();
   alert('friend has been deleted')
 } else {
   console.log('未找到对应表格行');
 }
 },
 error: function(xhr, errmsg, err) {
 console.log(errmsg, err) // 修正：原来的error变量写错了，应该用参数里的err
 }
 })
}

为什么这样能解决？ #

模板字符串（用反引号`包裹）会自动解析里面的${id}，把它替换成实际的ID值，生成类似tr[data-id="123"]的正确选择器，这样就能精准匹配到对应的表格行了。

更高效的优化方案（推荐） #

其实你完全可以不用通过ID去二次查找行，直接在点击按钮时获取它所在的父级tr，这样更可靠也更高效：

// 给按钮绑定点击事件（代替直接在HTML里写onclick，更符合Unobtrusive JS规范）
$('.remove-friend').click(function(){
  let id = $(this).val();
  let $row = $(this).closest('tr'); // 直接获取当前按钮所在的tr元素

  $.ajax({
    type: 'POST',
    url: `/delete/friend`,
    data: {
      friend_id: id,
      csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
      action: 'post'
    },
    success: function(json){
      $row.remove(); // 直接移除找到的行，无需再查找DOM
      alert('friend has been deleted')
    },
    error: function(xhr, errmsg, err) {
      console.log(errmsg, err)
    }
  })
})

这种方式跳过了DOM二次查找的步骤，彻底避免了选择器出错的可能，代码也更简洁直观。

内容的提问来源于stack exchange，提问作者sarchi-xo