Learn Web Development – The Super Simple Way

In our rendered list, let’s add a link that will remove the item from the list. First UI, then database. Here’s our modified list render. Replace our while loop with:

while ($row = $result->fetch_object()) {
    ?>
    <li id="task_<?php echo $row->task_id; ?>">
        <?php echo $row->task_description; ?>
        <a href="#" class="remove" data-id="<?php echo $row->task_id; ?>">Remove</a>
    </li>
    <?php
}

Notice that we gutted out a lot of the PHP and replaced it with HTML so we can read the code easier. We added IDs to the LI element to reference it when removing it. We also removed the style from here so we can add it to the CSS stylesheet. And, we added left padding of 0 to our UL so it doesn’t look all that indented.

ul {
    padding-left: 0;
}
ul li {
    list-style: none; 
    border-bottom: 1px solid #cccccc;
}

And then we modified our JavaScript main.js file like so:

}).on('click', '.remove', function(e) {
    e.preventDefault();
    var $this = $(this);
    var _task_id = $this.attr('data-id');
    $('#task_' + _task_id).remove();
});

Notice the daisy chaining of the “on” jQuery function. Also notice the caching of this. This is a unique JavaScript object name for the element which is being triggered. In this case, any element with the class “remove”. The dot in front of the word remove means “any element that has the class name of ‘remove'”. There can be multiple occurrences of a class throughout your document, unlike the ID.

We’re grabbing the element that was clicked, and storing its data-id attribute into a variable by the name of _task_id. This is to be able to trigger the jQuery remove function, which we use on the <li> element with the id of task_x where x is the _task_id.

This does not remove it from the database yet. To do that, we would need to create functionality for it.

Modify your JS file so that you can run an AJAX call to a file we’ll create in a second to handle the delete.

...
}).on('click', '.remove', function(e) {
    e.preventDefault();
    var $this = $(this);
    var _task_id = $this.attr('data-id');
    $.ajax({
        url: '/remove.php?id=' + _task_id,
        success: function(data) {
            $('#task_' + _task_id).remove();
        }
    });
});

Notice what we’re doing here. We’re making an AJAX call to the “remove.php” file which doesn’t exist yet. Upon success, meaning if there is no error, and the file actually exists, and doesn’t throw any error, it will run the success function defined in the AJAX call. The function contains code to remove the LI element from the DOM (front end of the document). We’re passing the ID in the URL as a QueryString GET variable.

Make a php file called remove.php off of the root of your project. Place this code in it:

<?php
$db = mysqli_connect("127.0.0.1", "root", "", "test");
$db->query("DELETE FROM task WHERE task_id = " . (int)$_GET['id']);
$db->close();
?>

This basically connects to the database, runs a delete SQL query to remove. The ID is based on the ID variable that’s being passed in the URL from our AJAX call.

/remove.php?id=x
leads to "DELETE FROM task WHERE task_id = x"

Of course, we could use some security and confirmation so we don’t accidentally erase things by clicking on them. Or, better yet, we can make tasks “complete” instead of removing them. To learn web development the right way, these kinds of decisions must be made at the conception level when you’re creating the architecture to your project.

To do so, we add a new field to our task table in our DB. Remember SQLYog? Add a field called task_completed, data type boolean, default of 0, and Not Null checked. You can’t check the Unsigned check because a boolean is either a 0 or a 1. There are no other values.

Once we create this field, let’s head to our remove.php file. Change your query to reflect this:

$db->query("UPDATE task SET task_completed = 1 WHERE task_id = " . (int)$_GET['id']);

This sets the task_completed flag to true. But wait, the item will still show on the front end. Let’s just create a condition to show the “Remove” link only if the task_completed = 0. Let’s call our link “Complete”.

<a href="#" class="remove" data-id="<?php echo $row->task_id; ?>">Complete</a>

And the logic to show the Complete link or not:

<?php if (!$row->task_completed) { ?>
    <a href="#" class="remove" data-id="<?php echo $row->task_id; ?>">Complete</a>
<?php } ?>

The ! is a logical operator that negates whatever it follows. Think of it as a NOT operator. This logic in PHP states that “if the task completed is NOT TRUE, do the following until the ending bracket }.

And of course, we don’t want to remove the entire LI element. Just the “Complete” link.

$('#task_' + _task_id + ' .remove').remove();

This tells jQuery to look for the element with the ID of task_x, and then find the element inside there with the class name “remove”, and remove that. And of course, if you refresh the page, you will see that the link has been removed permanently since the update was triggered in the database.

We should probably call the remove class complete class.

So let’s learn web development already. I understand that this is a simple, simple application. But, give it time, write more, and play around, a lot! Best of luck. More to come soon.

And remember, learn web development the easy way!