javascript - Changes to page are not saved (on page reload)

Question

<div class='wrapper one Stone' id='main'>
<h1>Stone</h1>
<p>Price: $130.00 per Yard</p>
 <?php if($_SESSION[id]) {?> 
<button class="Stonebutton"> Delete Stone</button>
<script>; $(".Stonebutton").click(function(){$(".Stone").remove();}); </script> 
 <?php } ?> 
</div>

When im logged in i can see the "Remove Stone" button and when i click it, it goes away but when i reload the page it comes back. Any help? Thanks a bunch!Im also loading this into the html page with a seperate php file using this:

fwrite($PlantFile, "

<div class='wrapper one $trimmedname' id='main'>
<h1>$name</h1>
<p>Price: $price</p>
 <?php if($_SESSION[id]) {?> 
<button class="$trimmedbname"> Delete $name</button>
<script> $(".$trimmedbname").click(function(){$(".$trimmedname").remove();}); </script> 
 <?php } ?> 
</div>
");

fclose($PlantFile);

Also if anyone has a better solution on what to do, im all ears. Thanks for all your help!

Answer 1

In order to properly understand this, you need to understand the life-cycle of a web page.

1. The browser makes a request to the server.
2. The server responds to that request. From the large array of possible responses, we'll assume everything went OK and it responded with a web-page (status code: 200). Most times (and the case we will consider here), the response is HTML.

Excluding all the things that could go wrong, a server will always return the same result for the same request. However, sometimes, that's not enough and that's where we use JavaScript. With JavaScript, we can make changes to the returned HTML, without having to tell the server: create a new page, containing this mod.

.remove() is such a JavaScript method. It changes the HTML after it was returned. It removes an HTML element that was part of the initial response, without going back to server and removing the code that generated the element in the first place, during the request.

This means that the page will contain the element again when you refresh the page, because you're making the same request (you're back to step 1).

If web worked the way you seem to expect it to, anyone could open up the console and delete the entire website with a simple line of code:

document.body.remove();

Luckily, that's now how web works.