2016-10-14 6 views
-2

十字ボタンのクリックでデータを含むタグを削除します。入力データを削除する

ここでは、「グリフリコン削除」タグをクリックすると、そのタグを削除する必要があります。

function toggleCloseColor(a) { 
 
    var opacity = a.css("opacity"); 
 
    opacity = opacity < .8 ? 1 : .6; 
 
    a.css({ 
 
    opacity: opacity 
 
    }); 
 
} 
 

 
${document}.ready(function() { 
 
    ${".tag a"}.each(toggleCloseColor); 
 
});
.tag.md { 
 
    font-size: 14px; 
 
} 
 
.tag { 
 
    padding: .3em .4em .4em; 
 
    margin: 0 .1em; 
 
    float: left; 
 
} 
 
.tag a { 
 
    color: #bbb; 
 
    cursor: pointer; 
 
    opacity: .5; 
 
} 
 
.tag .remove { 
 
    vertical-align: bottom; 
 
    top: 0; 
 
} 
 
.tag a { 
 
    margin: 0 0 0 .3em; 
 
} 
 
.glyphicon-white { 
 
    color: #fff; 
 
}
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="tag label btn-info md"> 
 
    <span>com.example.ExampleSuite</span> 
 
    <a style="opacity: 0.6;"> 
 
    <i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i> 
 
    </a> 
 
</div>

これは、のために働く必要が

+0

スナップショットを共有する代わりに、フィドルリンクを共有します。 – Rajesh

+0

これはフィドルのリンクです http://jsfiddle.net/7zkCU/30/ – Alok

+0

'x'をクリックするだけでフラグを設定し、レンダリングで' {!flag?

答えて

0

を、私は、関数を作成するための助けを借りて、JavaScriptで多くのことを試してみましたが、私は、「削除-glyphone」をクリックすることで、このタグを削除することができませんあなたがしていること。 jQueryは関与しません。人々が見るためにあなたのフィドルからコードを取り出しました。

<script> 
    function remove(elem) { 
    elem.parentElement.remove(); 
    } 
</script> 

<br/> 
Tags: 
<span class="tag label label-info"> 
    <span>Example Tag </span> 
    <a onClick="remove(this)"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> 
</span> 

要素を関数に渡したい場合は、おそらく最も簡単な方法です。そうしないと、ボタンの押下を処理するイベントリスナーを設定できます。

関連する問題