jquery this animate this element without id

Question

In my HTML code I have a div. This div includes some warnings to the users. Warnings are wrapped inside div elements with no ID. If user clicks on close button, it should remove the warning 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>

and this is my JS code:

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

It works fine. However, removing an element is better to be animated instead of sudden remove. If I want to manipulate JS only, how to remove the div with jquery? Is it possible to identify thisbutton in jquery since $(thisbutton) should not work here?

Answer 1

Like this maybe?

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

Answer 2

Separate out js from your html and use click event with jquery.

With fadeOut

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

Demo

Or try slideUp

Demo2