Question

是否有一种直接的方法可以使用ui按钮删除元素。鼠标在'x'按钮上显示的东西显示，然后关闭......？

Answer 1

jQuery确定非常简单。我会把CSS留给你，这是一个基本的标记：

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

jQuery位：

$('.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;
});

Answer 2

将类添加到要关闭的元素，例如“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>

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

创建一个可删除的div /元素

2 个答案: