Question

我有疑问，我该如何选择以前的div 代码： -

if($i > $start_from){
                echo "<div id=\"blog$i\"><h1 style=\"padding-top:30px; font-size:14px;\" id=\"shareContent\"><a target=\"_blank\" href=\"$url\">$title</a><br /></h1>
                $desc
                <br />
                <p><em>hahaquotes, DATED: $date, URL: <a target=\"_blank\" href=\"$url\">$url</a></em></p>
                <div class=\"applyLink\" style=\"width:720px; padding-right:12px; margin-top:20px;\">
                <p><a target=\"_blank\" href=\"$url\">READ</a><span style=\"float:right; cursor:pointer;\"><a class=\"delete\">DELETE</a></span></p>
                </div></div>";
                if($i == $start_from + 4) break; 
                }
                }

这是我的代码当我点击DELETE时，应删除整个div，div的id是动态创建的，我怎样才能使用jquery实现这一点。请帮帮我提前谢谢

Answer 1

使用delete类作为选择器将单击处理程序附加到锚点。在处理程序this中将引用单击的元素，然后您可以从那里遍历要删除的内容而无需知道其ID：

$("a.delete").click(function() {
    $(this).closest("div").closest("div").remove();
});

.closest() method遍历DOM以查找与提供的选择器匹配的最近祖先。在你特定的html结构中，你要寻找的div是第二个最接近的，所以我简单地将.closest()的两个调用链接在一起。

如果您修改html以提供要删除特定类的div，例如“条目”，则可以简化此操作，因为您可以通过单次调用.closest()来遍历它，如下所示：

echo "<div id=\"blog$i\" class=\"entry\">(etc.)"

$("a.delete").click(function() {
    $(this).closest("div.entry").remove();
});

如果你有几个这样的结构，那么每个“删除”链接只会删除它所属的div。

Answer 2

您可以将选择器用作

       $('div[id$="blog"]')

Answer 3

假设父div具有id属性而其他div没有id（根据您的示例）。
你可以用

$(".delete").click(function() {
    $(this).parents("div[id]").remove();
 }):

编辑：
使用.closest()代替.parents()会更好，更有效。

$(".delete").click(function() {
    $(this).closest("div[id]").remove();
 }):

感谢 nnnnnn 。

Answer 4

您的代码如下： -

JQuery的： -

$(document).ready(function(){
    $('a.delete').click(function(){
        $(this).closest('.parentPanel').remove();
    });

});

编辑：将parentUntill()更改为closest()，因为很少有人知情，我同意parentUntill()选择匹配者下方的选择器1步。 * 感谢nnnnnn

更改的代码： - 我添加了一个名为parentPanel

的类

if($i > $start_from){
            echo "<div id=\"blog$i\" class=\"parentPanel\"><h1 style=\"padding-top:30px; font-size:14px;\" id=\"shareContent\"><a target=\"_blank\" href=\"$url\">$title</a><br /></h1>
            $desc
            <br />
            <p><em>hahaquotes, DATED: $date, URL: <a target=\"_blank\" href=\"$url\">$url</a></em></p>
            <div class=\"applyLink\" style=\"width:720px; padding-right:12px; margin-top:20px;\">
            <p><a target=\"_blank\" href=\"$url\">READ</a><span style=\"float:right; cursor:pointer;\"><a class=\"delete\">DELETE</a></span></p>
            </div></div>";
            if($i == $start_from + 4) break; 
            }
            }

关于使用jquery删除前一个div

4 个答案: