Create a stacking tag system?
I am trying to create a tagging system the same as SO. I added tags, now I want to remove them.
MyQuestion:
- How do I remove attached tags?
- How do I make the span button look like the SO tagging system?
var tags = [];
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag' >" + this.value+'<span class="cross" onclick="remove_tag()">X</span>'+ "</a>");
function remove_tag(){
//what to do here?
}
tags.push(this.value);
this.value = "";
}
});
source to share
Here's my JSFiddle: http://jsfiddle.net/Wky2Z/11/
Basically, listen on .cross
which one to click and then remove from the array and remove the element
//enter something in textbox and press enter....
var tags = [];
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag' >" + this.value+'<span class="cross">X</span>'+ "</a>");
tags.push(this.value);
this.value = "";
}
});
$('body').on('click','.cross',function(){
tags.splice($(this).parent('a').html(), 1);
$(this).parent('a').remove();
});
As for the appearance of the cross, SO uses CSS Sprite, so you can do the same by making a png or gif or jpeg from two states, turn off (gray) and hover over (red) and toggle background-position
red with css, e.g .:.cross:hover { background-position:0px -20px }
source to share
You can remove items using remove()
. Also, I would recommend that you use jQuery events instead of using inline events. (if you look at stackoverflow source code you will notice there are no inline javascript calls)
In this case, you will need to add an event handler to the object document
, since you want to assign events to elements that are not loaded into the DOM from the beginning.
$(document).on('click', '.tag span', function(){
$(this).parent().remove();
});
Life example: http://jsfiddle.net/Wky2Z/7/
Update
I've updated the example by removing the item from the tag list: http://jsfiddle.net/Wky2Z/8/
Added data-value
for tag links:
$(".target").append("<a href='#' class='tag' data-value='" + this.value + "' >" + this.value+'<span class="cross">X</span>'+ "</a>");
And changed the click event:
$(document).on('click', '.tag span', function(){
$(this).parent().remove();
var removeItem = $(this).parent().data('value');
tags = $.grep(tags, function(value) {
return value != removeItem;
});
});
source to share
For a complete jQuery solution, you can remove the inline function remove_tag
and use the jQuery function on
. it also works for dynamically created elements.
Attach an event handler function for one or more events to the selected items.
Here you can get the parent of the removed element and remove it from the DOM with remove
.
To "synchronize" an array with the current situation, you can use grep
to remove an element from the array; notice the variable removedItem
used to get the parent's text only, excluding the children from the text.
code:
//enter something in textbox and press enter....
var tags = [];
$(document).ready(function () {
$('body').on('click', 'span.cross', function () {
var removedItem = $(this).parent().contents(':not(span)').text();
$(this).parent().remove();
tags = $.grep(tags, function (value) {
return value != removedItem;
});
});
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag' >" + this.value + '<span class="cross">X</span>' + "</a>");
tags.push(this.value);
this.value = "";
}
});
});
source to share
Here's an updated link: http://jsfiddle.net/Wky2Z/6/
Move remove_tag
outside of the keypress event handle and pass a this
pointer to it for a quick fix:
//enter something in textbox and press enter....
var tags = [];
function remove_tag(x) {
$(x).parent('a').remove();
}
$(function () {
$("#textBox").keypress(function (e) {
if (e.which === 13) {
$(".target").append("<a href='#' class='tag' >" + this.value + '<span class="cross" onclick="remove_tag(this)">X</span>' + "</a>");
tags.push(this.value);
this.value = "";
}
});
});
source to share