Question

如何使用jquery删除在php中创建的div标签？具体来说，按下删除按钮后，我想删除一个div。我有几个。

这是我的PHP代码：

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

这是我的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

你要删除哪个div？

在jQuery中你可以做到：

$(div_to_remove).remove();

Answer 2

试试这个

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

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

});

Answer 3

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

如果您只想删除第一个div：

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

您可以在html中的某处添加以下代码：

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

注意：

开头。用于类名和＃用于在jQuery中查找元素。示例：$（'。YOURCLASSNAME'）或$（'＃YOURID'）

Answer 4

试试这段代码

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

Answer 5

试试这个

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

在这里，

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

您需要应用ID

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

Answer 6

似乎你有一个id“bookdiv”更多一次 - html id必须是唯一的 ...更改div - ＆gt;在您的按钮中添加data-delete="$id_of_your_div"等数据属性，然后：

示例

HTML：

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

按钮：

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

删除JS

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

Answer 7

尝试这个

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

       }
  })
});

使用jQuery删除从PHP创建的div

7 个答案: