JQuery Remove comes back after page refresh? [duplicate]

Question

Hi I am using JQuery remove and when the page is refreshed it brings the removed item back

Does anyone have any idea why? I need this to stay hidden/removed from page.

JQUERY

<script>
$(document).ready(function(){
    $("#button").click(function(){
        $("#div1").remove();
    });
});
</script>

PHP

while($row=$query->fetch(PDO::FETCH_ASSOC) and ($counter < $maximumAmount))  
 {      
   echo "<div id='div1'>"."".$row["1"].""."<img src=/".$row['2']."' width='150' height='150' />"."<br><br>".$row["3"]."

<form method='POST'><input type='hidden' name='ID' value= '".$row['ID']."'>
<input type='submit' name='submit' value='' id='button' ></form></div>";            

Answer 1

Any operation made with jQuery has effect only during the lifetime of the current page. Once you reload the page, all those changes will be lost.

If you want that the button stay hidden, you need to store that information somewhere. You could make a request to the server and store it in a preference, so next time you reload your PHP code can hide the button. You could also use localStorage to keep it hidden:

<script>
$(document).ready(function(){
    var div1Removed = localStorage.getItem('div1_removed');
    if (div1Removed) {
        $("#div1").remove();
    } else {
        $("#div1").show();
    }
    $("#button").click(function(){
        $("#div1").remove();
        localStorage.setItem('div1_removed', 'true');
    });
});
</script>

In the PHP code, we add display: hidden to the div, so it is initially hidden. When the page loads, the JavaScript code will check whether it should be visible or not. If it should, then it makes it visible. If it shouldn't, then it removes it completely.

while($dbRow=$dbQuery->fetch(PDO::FETCH_ASSOC) and ($cnt < $max))  
 {      
   echo "<div id='div1' style='display: hidden;'>"."".$dbRow["Name"]."</h4><br>"."<br><img src=/".$dbRow['Picture']."' width='150' height='150' />"."<br><br>".$dbRow["Instructions"]."

<form method='POST'><input type='hidden' name='MealID' value= '".$dbRow['MealID']."'>
<input type='submit' name='submit' value='Complete' id='button' ></form></div>";            
$cnt++;