javascript – remove todo list items Node.js Express EJS

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("https://stackoverflow.com/", (req, res) => {
    res.render('index', { tasks: tasks });
});

app.post("https://stackoverflow.com/", (req, res) => {
    // HANDLE form POST REQUEST
    tasks.push(req.body.addedTask);
    res.redirect("https://stackoverflow.com/");
});

// 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>

Read more here: Source link