使用jQuery remove移除元素后刷新页面元素恢复，求原因及解决办法

嘿，这问题我碰到好多次了！核心原因其实很简单：你用jQuery的remove()只是在当前浏览器的DOM中删掉了元素，但这只是前端临时的变化。当页面刷新时，浏览器会重新向服务器请求整个页面，你的PHP代码会从头执行一遍，把所有符合条件的内容（包括那个被你删掉的div）重新渲染出来，所以元素自然又回来了。

另外先提个小问题：你PHP循环里输出的都是<div id='div1'>，但HTML里id必须是唯一的！这会导致jQuery只能找到第一个div，后面的都操作不了，建议改成动态id，比如div-<?php echo $row['id']; ?>（假设你的数据里有唯一id字段）。

下面给你两种常用的解决方案，根据你的需求选：

方案一：前端本地存储（适合不需要同步到服务器的场景） #

如果只是当前用户在自己的浏览器里不想看到这个元素，不需要让服务器记住这个状态，可以用localStorage来保存移除状态，页面加载时自动检查并隐藏/移除元素。

修改后的jQuery代码：

$(document).ready(function(){
  // 页面加载时，检查本地存储里的状态
  if(localStorage.getItem('removedDiv1') === 'true'){
    $("#div1").remove(); // 或者用hide()，方便后续恢复
  }

  $("#button").click(function(){
    $("#div1").remove();
    // 把状态存在localStorage里，刷新后依然有效
    localStorage.setItem('removedDiv1', 'true');
  });
});

如果是多个动态生成的div，就需要给每个按钮绑定对应的div id，存储时用唯一的key，比如removed-div-123这样的格式。

方案二：服务器端存储（适合需要永久移除或多设备同步的场景） #

如果要彻底让服务器不再输出这个元素，就需要把移除的状态存在服务器端（比如Session或者数据库）。

1. 修改PHP渲染逻辑（用Session记录要移除的元素） #

session_start(); // 记得在页面开头启动Session
// 初始化移除列表
$removedDivIds = isset($_SESSION['removed_divs']) ? $_SESSION['removed_divs'] : [];

while($row=$query->fetch(PDO::FETCH_ASSOC) and ($counter < $maximumAmount)) {
  // 只有这个元素不在移除列表里，才输出
  if(!in_array($row['id'], $removedDivIds)){
    echo "<div id='div-".$row['id']."'>".$row["1"]."<img src='/".$row['2']."' width='150' height='150' /><br>...";
    // 给每个div加个移除按钮
    echo "<button class='remove-btn' data-id='".$row['id']."'>移除</button></div>";
  }
}

2. 编写jQuery的AJAX请求（通知服务器移除元素） #

$(document).ready(function(){
  $(".remove-btn").click(function(){
    var divId = $(this).data('id');
    $.ajax({
      url: 'handle_remove.php', // 处理移除请求的PHP文件
      type: 'POST',
      data: {div_id: divId},
      success: function(response){
        // 成功后移除页面上的元素
        $("#div-"+divId).remove();
      }
    });
  });
});

3. 编写handle_remove.php（处理服务器端的状态保存） #

session_start();
if(isset($_POST['div_id'])){
  $targetId = $_POST['div_id'];
  if(!isset($_SESSION['removed_divs'])){
    $_SESSION['removed_divs'] = [];
  }
  // 避免重复添加
  if(!in_array($targetId, $_SESSION['removed_divs'])){
    $_SESSION['removed_divs'][] = $targetId;
  }
  echo "success";
}

这样下次页面刷新时，PHP就不会再输出被标记移除的元素了。如果需要永久保存到数据库，把Session的逻辑改成写入数据库即可。

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