CODEWITHSUNDEEP
javascriptphpjqueryhtml
foobear
foobear

Reputation: 27

Removing div created from PHP using jQuery

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");
        });
});

Upvotes: 0

Views: 1869

Answers (7)

Karthick Kumar
Karthick Kumar

Reputation: 2361

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");

       }
  })
});

Upvotes: 0

pixelpalast
pixelpalast

Reputation: 28

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();
});

Upvotes: 0

HB Kautil
HB Kautil

Reputation: 267

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>

Upvotes: 0

kp singh
kp singh

Reputation: 1460

try this code

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

Upvotes: 0

0xc14m1z
0xc14m1z

Reputation: 3725

Which div you would delete?

In jQuery you can simply do:

$(div_to_remove).remove();

Upvotes: 1

ReeCube
ReeCube

Reputation: 2607

$('.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')

Upvotes: 0

krishna
krishna

Reputation: 4089

try this

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

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

});

Upvotes: 0

Related Questions