Deleting specific div with PHP - php

Question

I'm making a To do application in PHP for a school assignment.
At this point, I can add new tasks. But the problem is:
When I click at a div (to delete it), the div is deleted, BUT all the other tasks get invisible. They only show up again if I create a new task.
This is my code
File Index.php
<div class="container">
<form action="/Periodeopdracht/index.php" method="POST">
<div class="headerToDo">
<input class="addText title" type="text" value="Click to add a task" name="nextToDo">
<input class="clickablePlus" type="submit" value="+" name="submit"></div>
</form>
<?php if(!$empty): ?>
<?php foreach ($_SESSION["todoList"] as $_SESSION["key"] => $toDo): ?>
<div class="toDo">
<form action="/Periodeopdracht/index.php" method="POST">
<button value="<?php echo $_SESSION["key"] ?>" name="delete" class="delete" type="submit" >X</button>
<button value="<?php echo $_SESSION["key"] ?>" name="done" class="done" type="submit" >V</button>
<div value="<?php echo $_SESSION["key"] ?>" class="textToDo"><?= $toDo ?></div>
</form>
</div>
<?php endforeach ?>
<?php endif ?>
</div>
Application.php
<?php
session_start();
$GLOBALS["empty"] = true;
$_SESSION['todoList'] = isset($_SESSION['todoList']) ? $_SESSION['todoList'] : array();
if(isset($_POST["submit"]))
{
$empty = false;
array_unshift($_SESSION['todoList'], $_POST["nextToDo"]);
}
if(isset($_POST["delete"]))
{
unset($_SESSION['todoList'][$_SESSION["key"]]);
//var_dump($key);
}
?>

Answer 1

Try to handle it like a normal post, since this key will be available on submission:
<!-- no need to create every form -->
<form action="/Periodeopdracht/index.php" method="POST">
<?php foreach ($_SESSION["todoList"] as $key => $toDo): ?>
<div class="toDo">
<button value="<?php echo $key; ?>" name="delete" class="delete" type="submit" >X</button>
<button value="<?php echo $key; ?>" name="done" class="done" type="submit" >V</button>
<div value="<?php echo $key; ?>" class="textToDo"><?= $toDo ?></div>
</div>
<?php endforeach; ?>
</form>
Then, upon submission:
if(isset($_POST["delete"])) {
$key = $_POST["delete"];
unset($_SESSION['todoList'][$key]);
}
Sidenote: Are you sure your form action is /Periodeopdracht/index.php? Maybe this operation is intended to use Application.php like you posted the $_POST processes above.
Also, this is superfluous/unneeded.
$_SESSION['todoList'] = isset($_SESSION['todoList']) ? $_SESSION['todoList'] : array();
This reassignment makes no sense.
Just use a simple initialization:
if(!isset($_SESSION['todoList'])) {
$_SESSION['todoList'] = array();
}
A Little bit of rewrite:
Form:
<div class="container">
<form action="/Periodeopdracht/index.php" method="POST">
<div class="headerToDo">
<input class="addText title" type="text" value="Click to add a task" name="nextToDo">
<input class="clickablePlus" type="submit" value="+" name="submit"></div>
</form>
<!-- no need to create every form -->
<form action="/Periodeopdracht/index.php" method="POST">
<?php foreach($_SESSION["todoList"] as $key => $toDo): ?>
<div class="toDo">
<button value="<?php echo $key; ?>" name="delete" class="delete" type="submit" >X</button>
<button value="<?php echo $key; ?>" name="done" class="done" type="submit" >V</button>
<div class="textToDo"><?php echo $toDo; ?></div>
</div>
<?php endforeach; ?>
</form>
</div>
Then in /Periodeopdracht/index.php:
<?php
session_start();
// simple initialization
if(!isset($_SESSION['todoList'])) {
$_SESSION['todoList'] = array();
}
// addition / push inside items
if(isset($_POST["submit"], $_POST["nextToDo"])) {
$_SESSION['todoList'][] = $_POST["nextToDo"];
}
// delete key
if(isset($_POST["delete"])) {
$key = $_POST["delete"];
unset($_SESSION['todoList'][$key]);
}
?>