jquery - li要素の右側上部に削除ボタンを設定するには?

Question

私は削除ボタンでli要素を作ろうとしていますが、解決策を見つけることができません

私が欲しいのは：

ここで赤い四角形は削除ボタンです

html しようとしていることは次のとおりです。

 <li id="liRightDescriptions">
    <span>
    Descriptions
    <img src="../Images/RemoveButton.ico">
    </span>
    </li>

詳細：MouseOverに削除ボタンを表示する必要があり、そこをクリックするとjqueryクエリイベントが発生し、テキストでも、

だから私は背景として削除画像を設定したくないと思います

これは私のhtmlです： http://jsfiddle.net/2h78A/

Answer 1

HTML (スパン内の x を任意のテキストまたは画像に置き換えることができます)

<ul>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
<li><span>x</span>Text 1</li>
</ul>

CSS

ul{
    width:160px;
}
li{
    position:relative;
    padding:5px 10px;
    background:#ccc;
    border-radius:3px;
    margin:3px;
}
li:hover span{display:block;}
li span{
    display:none;
    padding:3px;
    line-height:8px;
    cursor:pointer;
    position:absolute;
    right:0px;
    top:0px;
}

Answer 2

ボタンの位置については、次を使用します。

.removeImg {
    float: right;
}

また

.liRightDescriptions span {
    position: relative;
}

.removeImg {
    position: absolute;
    top: 0;
    right: 0;
}

ホバー時に表示/非表示にするには：

$('.liRightDescriptions').hover(function() {
    $('.removeImg').fadeIn(500);
}, function() {
    $('.removeImg').fadeOut(500);
});

liクリックを非表示にするには：

$('.removeImg').click(function() {
    $(this).parent('.liRightDescriptions').hide(500);
    /* you could also remove the element altogether here if needed */
});

要素は一意ではないため、IDではなくクラスを使用する必要があることに注意してください。

Answer 3

black-square {
position: relative
}

delete-img { 
position:absolute;
top:2px;
right: 2px;
}