I am currently working on building a webpage with NodeJS and Express, utilizing the ejs templating engine. In my navbar, I have a menu item labeled add. When a user clicks on this item, it should take them to another page where they can input some data. However, what I want is for the "add" menu item to be hidden on the next page it links to.
Below is the code I have implemented:
nav.ejs
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">Studious</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav">
<li class="nav-item">
<a id="ad" class="nav-link active" aria-current="page" href="/add">Add</a>
</li>
</ul>
</div>
</div>
</nav>
index.js
$(document).ready(function(){
$("#ad").click(function(){
$(this).hide();
});
});
server.js
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.set('views', path.join(__dirname, 'views'));
app.set('view engine','ejs');
app.use("/public", express.static('public'));
app.use(express.static(path.join(__dirname,'public')));
app.get('/',(req,res) => {
res.render('index');
});
app.get('/add',(req,res) => {
res.render('add');
});
app.listen(port,() => console.log(`App is running at ${port}`));
If you have any suggestions or solutions on how I can achieve the desired outcome, please let me know. Thank you!