Сделайте удаляемый div / element

Question

Есть ли прямой способ сделать элемент удаляемым с помощью кнопки пользовательского интерфейса.что-то по линии мыши над кнопкой «х» показывает, затем закрывает ...?

Answer 1

Добавьте класс к элементам, которые вы хотите закрыть, например, "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.

Answer 2

Это очень просто с уверенностью 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;
});