Deleting divs via PHP - php

Question

I'm making a To do application with PHP (school assignment)
At this moment, I can add tasks to the list. Deleting is the next problem.
The "problem" is that I HAVE to use PHP to delete the corresponding div. (It needs to delete the div i'm clicking)
My question: what's the best practice to do that? (Working with a specific number maybe?)
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="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['done'])) {
foreach ($_SESSION["todoList"] as $key => $toDo) {
if ($toDo == $_POST['done']) {
unset($_SESSION['todoList'][$key]);
break;
}
}
}
?>

Answer 1

foreach ($_SESSION["todoList"] as $key => $toDo)
then use $key as the value of your "done" button, When processing you can just unset($_SESSION['todoList'][$key])
you will have to check that the key is valid coming from the post though.

Answer 2

Add a <hidden> field to each toDo with, the id of the toDo, then you will know what to remove from the toDo list.

Answer 3

In addition to what exussum was stating. U'll need to define in your HTML which todo item u want to delete. Atm your just posting an empty button. Change your html to something like this:
<div class="toDo">
<form action="/../index.php" method="POST">
<button name="done" class="done" value="<?= $toDO ?>" type="submit">V</button>
<div class="textToDo"><?= $toDo ?></div>
</form>
</div>
Now if you post the form the variable $_POST['done'] will contain the task that is completed. Now the check this :
<?php
if (isset($_POST['done']) {
foreach ($_SESSION["todoList"] as $key => $toDo) {
if ($toDo == $_POST['done']) {
unset($_SESSION['todoList'][$key]);
break; //terminates the loop as we found the correct item
}
}
$empty = empty($_SESSION["todoList"]);
}
I'm not a huge fan of posting raw values to check whether items need to be deleted.
Its beter to work with (unique) id's if you are using these.