CODEWITHSUNDEEP
javascriptjqueryhtml
skjindal93
skjindal93

Reputation: 734

Completely remove a div when user navigates back to the website

I am working on a website where let us say we have an index.html with 2 divs.

<div id="top">
    Some Content
</div>
<div id="content">
    Some Content
    <a href="page.html"></a>
</div>

The content id div has an anchor tag. When I click on anchor tag,page.html loads in the same tab. Now when I press back button of browser, I want that div with id should not be present. Actually, I just want that when someone visits the website for first time, the div top should appear and then should never appear again even if some one follows a link and tries to go back. Although, when someone again opens the website in a new tab, the website should come all over again (with the top div and the same thing again). Is it possible?

Upvotes: 0

Views: 70

Answers (1)

Noble Mushtak
Noble Mushtak

Reputation: 1784

This is possible with JavaScript, but it's probably better done server-side.

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script>
    var content, body;
    document.addEventListener("DOMContentLoaded", function() {
        content = document.getElementById("content");
        body = document.getElementsByTagName("body")[0];
        if (localStorage.getItem("wasHere") !== null) {
            body.removeChild(content);
        } else {
            localStorage.setItem("wasHere", "true");
        }
  });
  </script>
</head>
<body>
  <div id="top">
      Some Content
  </div>
  <div id="content">
      <!-- You need to put text inside links for them to show -->
      <a href="page.html">Some Content</a>
  </div>
</body>
</html>

The problem with this solution is that localStorage is easily modifiable and not reliable. Thus, again, you should really use a server-side solution. This is there if you need it, though.

Upvotes: 1

Related Questions