Cannot remove each list items from a Node.js array by clicking on a html button via EJS and express:
I think I should put an html button besides each list element and then remove the selected element from the Node.js "tasks" array.
What I don't know is how to tell the exact element to remove between EJS and Node.js using express.
// IMPORT MODULES
// npm init -y
// npm i express ejs
const express = require('express');
const ejs = require('ejs');
// SETUP
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.json());
app.use(
express.urlencoded({
extended: true,
})
);
// DEFINE VARIABLES
let tasks = ['eat', 'sleep'];
let task = '';
// ROUTES
app.get('/', (req, res) => {
res.render('index', { tasks: tasks });
});
app.post('/', (req, res) => {
// HANDLE form POST REQUEST
tasks.push(req.body.addedTask);
res.redirect('/');
});
// PORT
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- TODO LIST -->
<ul>
<% tasks.forEach((task) => { %>
<li><%= task %></li>
<% }); %>
</ul>
<!-- ADD TASK -->
<form action="/" method="post">
<input type="text" name="addedTask" placeholder="New Task" />
<button type="submit">Add Task</button>
</form>
</body>
</html>