javascript - jquery this 动画这个元素没有 id

Question

在我的 HTML 代码中，我有一个 div。这个 div 包含一些对用户的警告。警告包含在没有 ID 的 div 元素中。如果用户点击关闭按钮，它应该删除警告 div。

<div id="alarmbox" align="center">
      <div>this is warning 1<button onclick="remove_div_of_this_button(this);">x</button></div>
      <div>this is warning 2<button onclick="remove_div_of_this_button(this);">x</button></div>
</div>

这是我的 JS 代码：

function remove_div_of_this_button(thisbutton)
{
    thisbutton.parentNode.parentNode.removeChild(thisbutton.parentNode);
}

它工作正常。但是，删除元素最好是动画而不是突然删除。如果我只想操作 JS，如何用 jquery 删除 div？是否可以在 jquery 中识别thisbutton，因为 $(thisbutton) 不应该在这里工作？

Answer 1

也许像这样？

function remove_div_of_this_button(thisbutton)
{
    $(thisbutton).parent().fadeOut(function() {
        $(this).remove();
    });
}

Answer 2

将 js 从您的 html 中分离出来，并将 click 事件与 jquery 一起使用。

带淡出

$(function(){
    $('#alarmbox button').click(function () {
        $(this).closest('div').fadeOut(1000,function(){
            $(this).remove();
        });
    });
});

演示

或者试试slideUp

演示2