Delete Single and Multiple entries in one View, PHP, MYSQL, HTML

Question

How do I achieve the following?

I have a list of entries.

I want to be able to delete a single entry via the right "x"

But also I would like to be able to select multiple entries via the checkboxes on the left. After that, obviously clicking the "delete selected entries" at the bottom.

At the moment, all of this is in one form. Everything is links at the moment, not really what I want at all because it doesnt work.

Can anyone help me with a strategy or implementation that would enable me to get this working?

Heres the html code at the moment, I create it dynamically with some PHP, request if you want to see: :)

<form class="learnfest_form" method="post" action="">
    <h2>Delete a Learnfest Entry <small>Select an entry to delete</small></h2>
    <hr>
            <ul class="list-group checked-list-box">
                    <li class="list-group-item"><input type="checkbox" value="c1e42a9f9cfbdad684fa5a107a9967cef96a8a6e">&nbsp; L01<a class="pull-right" href="c1e42a9f9cfbdad684fa5a107a9967cef96a8a6e" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
                    <li class="list-group-item"><input type="checkbox" value="0c0203b6b6d5105a3e72deac0b61be61236b1ff7">&nbsp; L02<a class="pull-right" href="0c0203b6b6d5105a3e72deac0b61be61236b1ff7" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
                    <li class="list-group-item"><input type="checkbox" value="99a5cbf3ff728b5d6f3f524d301edc6a5d38feb9">&nbsp; L03<a class="pull-right" href="99a5cbf3ff728b5d6f3f524d301edc6a5d38feb9" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
                    <li class="list-group-item"><input type="checkbox" value="31729ebd6fa5fcb0f17cdc1e3e5fe3c861149782">&nbsp; L04<a class="pull-right" href="31729ebd6fa5fcb0f17cdc1e3e5fe3c861149782" onclick="return confirm('Are you sure?');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>
                </ul>
        <div class="panel panel-default">
            <div class="panel-body">
                Delete Selected Entries <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
            </div>
        </div>
    </form>

Answer 1

When you click on Delete Selected Entries retrieve all .list-group-item checkbox:checked elements and make an AJAX request to your php page to delete all of them. Your request will be something like this:

{
  elementstodelete: [
    'c1e42a9f9cfbdad684fa5a107a9967cef96a8a6e',
    '0c0203b6b6d5105a3e72deac0b61be61236b1ff7'
  ]
}

On server side you use json_decode() to read all the elements and you'll make the magic query to delete them.