Jquery 创建一个可删除的div/element

是否有一种简单的方法可以通过ui按钮删除元素。沿着鼠标在“x”按钮上的线条显示，然后关闭…？

使用jQuery sure非常直接。我将把CSS留给您，这里有一个基本的标记：

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

---

向要关闭的元素添加一个类，例如“closeable”。然后编写一些jQuery以在悬停时显示关闭按钮：

<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>

$（文档）.ready（函数（）
{
$（'.closeable'）。悬停（函数（）
{
$（this.append（'x'）；
$（this）.children（'.closebutton'）。单击（函数（）
{
$（this.parent（）.remove（）；
});
}，函数（）
{
$（this）.children（'.closebutton'）.remove（）；
});
});
内容！

---

此脚本将在悬停时隐藏关闭按钮。单击按钮将删除带有.closeable类的元素。

？是的，确实需要删除，但考虑得很周到

<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>