Alok Alok - 1 month ago 6
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;
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>





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

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

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

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.

Comments