Make a delete-able div/element

Is there a straight-forward w开发者_开发问答ay to make an element delete-able with a ui button. something along the lines of mouse over 'x' button shows, then close...?

It's very straight-forward with jQuery sure. I'll leave the CSS to you, here's a basic mark-up:

<div>
<a href="#" class="close">Close X</a>
<!-- Other code -->
</div>

And the jQuery bit:

$('.close').click(function(){
    $(this).parent().remove();
    // Although I recommend just hiding it
    // like this
    // $(this).parent().hide(); 
    // or fade it out
    // $(this).parent().fadeOut();
    return false;
});

Add a class to the elements that you want to close, such as "closeable". Then write some jQuery to show a close button on hover:

<script type="text/javascript">
$(document).ready(function ()
{
    $('.closeable').hover(function ()
    {
        $(this).append('<div class="closebutton" style="display: inline-block; vertical-align: top; font-size: .8em;">x</div>');
        $(this).children('.closebutton').click(function ()
        {
            $(this).parent().remove();
        });
    }, function ()
    {
        $(this).children('.closebutton').remove();
    });
});
</script>

<div class='closeable' style="display: inline-block; border: 1px solid red; padding: .25em;">Content!</div>

This script will hide the close button when hovering out. Clicking the button removes the element with the .closeable class.