Alok Alok - 1 year ago 102
React JSX Question

Remove Input data

I want to remove the tag containing the data on the click of cross button.

Here I just want that when I click on the "remove-glyphicon" tag, then the tag should be removed.

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

${document}.ready(function() {
${".tag a"}.each(toggleCloseColor);
}); {
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=""></script>
<link href="" rel="stylesheet" />
<div class="tag label btn-info md">
<a style="opacity: 0.6;">
<i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i>

I have tried a lot in javascript through the help of creating a function but I am unable to remove this tag by clicking "remove-glyphone"

Answer Source

This should work for what you're doing. No jQuery involved. Took the code from your fiddle for people to see.

  function remove(elem) {

<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>

You want to pass the element to the function which is probably the easiest way, otherwise you can set up event listeners to handle button presses.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download