PHP AJAX Dynamically Remove Data - php

Question

I am trying to use AJAX to dynamically delete a record from the database through the front end site, I have the code but when I click the delete button nothing happens, there is connection to the database I just cannot find the mistake in the code, all the code files are linked to one another.
The table I want to delete a record from is called recipes.
HTML
<div id="recipecards2" class="row">
<div class="col-sm-3">
<div id="recipecards" class="card">
<div class="card-body">
<p>
<button type="button" id="deletebutton" class="btn btn-outline-danger" input type="submit" name="recipe_delete" data-id="<?php echo $recipe['recipe_id']; ?>">
<i style=color:black; class="fa fa-trash-o"></i> Delete Recipe </button> </a>
</p>
</div>
</div>
<br>
</div>
Ajax PHP code
<?php
require_once('../includes/db.php');
if($_POST['itemid']){
$query = "DELETE FROM recipes WHERE itemid= $recipe_data['recipe_id'];";
$result = $DBH->prepare($query);
$result->bindParam(':itemid', $_POST['itemid']);
$result->execute();
echo $_POST['itemid'];
}
?>
Javascript
$('#recipecards2').on('click', '#deletebutton', function() {
// var that = this;
var itemid = $('#recipecards').attr('data-id');
var request = $.ajax({
url: "ajax/removeItemsFromList.php",
type: "post",
data: { itemid : itemid}
});
// If we're successfull!
request.done(function (response, textStatus, jqXHR){
$('#recipecards2 > #recipecards[data-id="'+response+'"] ').remove();
});
});

Answer 1

Firstly, your issue is that you are using named parameters incorrectly, you are prepareing your query, yet at the same time you are passing a value directly to it.
Change,
$query = "DELETE FROM recipes WHERE itemid= $recipe_data['recipe_id'];";
To,
$query = "DELETE FROM recipes WHERE itemid = :itemid;";
Secondly, if you are using the data-* properties, consider using the respective .data() function too.
Thirdly, when you do an AJAX request and it doesn't go right, open your browser console and check the response of that request. That generally should point you in to the right direction.
Fourthly, your HTML for your button is malformed, take a look at your button code,
<button type="button" id="deletebutton" class="btn btn-outline-danger" input type="submit" name="recipe_delete" data-id="<?php echo $recipe['recipe_id']; ?>">
Notice how you have a button/input mix? Pick one, you don't need to have both.