削除可能なdiv /要素を作成する

Question

uiボタンを使用して要素を削除可能にする簡単な方法はありますか？ 'x'ボタンの上のマウスの線に沿った何かが表示され、次に閉じる...？

Answer 1

それは非常に確かjQueryを使って単純明快です。

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

とjQueryビット：私はここで基本的なマークアップだ、あなたにCSSを残しておきます

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

閉じたい要素にクラスを追加し、そのような "として閉じることができます。ホバーにクローズボタンを表示する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クラスの要素が削除されます。