Removing div created from PHP using jQuery

Question

How do I use jquery to remove this div tag created in php? Specifically, After pressing the delete button I want to remove one div. I have several.

Here is my PHP code:

<?php
// For each book...
while ($row = mysql_fetch_assoc($result)){
echo '<div class="task-list" id="div_'.$row['uid'].'"><table>';
echo "<tr>";
echo "<td><b>".$row['title']."</b></td></tr>";
echo "<tr><td>".$row['author']."</td></tr>";
echo '<tr><td><img src="'.$row['image_url'].'" width="50" height="100" /></td></tr>';
echo '<tr><td><button class="btn cmt_list" name="cmtList" id="cmt- '.$row['uid'].'"value = "hide/show"/>Show</button> </td></tr>';
echo '<tr><td><button class="btn btn-danger delete_bk" name="deleteItem" id="'.$row['uid'].'" />Delete</button></td></tr>';
echo "</table></div>";
?>

This is my javascript:

//deleting a book from DB when user clicks "Delete" button
$(".delete_bk").on("click", function() {
    var book_id = $(this).attr('id');
    $.ajax({
            type: "GET",
        url: "delete_bk.php",
            data: {book_id: book_id}
    })
    .done(function() {
        var id = $(this).attr('id');
    $('#div_'+id).remove();
    alert("Data deleted");
        });
});

Answer 1

Which div you would delete?

In jQuery you can simply do:

$(div_to_remove).remove();

Answer 2

try this

$("#deletebtnid").click(function(e){

$("#divid").remove();

});

Answer 3

$('.task-list').remove();

and if you just want to remove the first div:

$('.task-list').first().remove();

you can add the following code somewhere in your html:

<script>
$(document).ready(function() { $('.task-list').remove(); });
</script

Note:

start with . for class names and # for ids to find elements in jQuery. Example: $('.YOURCLASSNAME') or $('#YOURID')

Answer 4

try this code

$(document).on('click','.delete_bk', function(){
    $('#bookdiv').remove();
});

Answer 5

Try this

$(document).on('click', '.delete_bk', function(){
        var id = $(this).attr('id');
        $('#div_'+id).remove();
    });

Here in line,

<div class="task-list" id="bookdiv"><table>

you need to apply ID like

<div class="task-list" id="div_'.$row['uid'].'"><table>

Answer 6

seems that you have the id "bookdiv" more that once - html ids have to be unique ... change div -> add a data-attribute like data-delete="$id_of_your_div" to your button and then:

Example

Html:

<div class="bookdiv task-list" id="book-5813">

Button:

<button class="delete_bk" ... data-delete="#book-5813" />

Delete JS

$(document).on('click','.delete_bk', function(){
   var delete = $(this).data('delete');
    $(delete).remove();
});

Answer 7

try this one

$(".delete_bk").on("click", function() {
var book_id = $(this).attr('id');
$.ajax({
        type: "GET",
        url: "delete_bk.php",
        data: {book_id: book_id},
        success:function(){
             $('#div_'+book_id).remove();
             alert("Data deleted");

       }
  })
});