I am trying to create a tagging system just like SO has. I have added the tags,now I want to remove them.
MyQuestion:
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 = "";
}
});
Here's my JSFiddle: http://jsfiddle.net/Wky2Z/11/
Basically, listen on the .cross
to be clicked, and then remove from array and delete 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 look of the cross, SO use a CSS Sprite, so you can do the same by making a png or gif or jpeg of the two states, off(grey) and hover(red) and switch the background-position
to red with css eg: .cross:hover { background-position:0px -20px }
You can delete elements making use of remove()
. Also, i would recommend you to make use of jQuery events instead of using inline events. (if you take a look at the source code of stackoverflow you will notice there are no inline javascript calls)
In this case you would need to add an event handler to the document
object as you want to assign the events to elements which are not loaded in the DOM from the start.
$(document).on('click', '.tag span', function(){
$(this).parent().remove();
});
Living example: http://jsfiddle.net/Wky2Z/7/
I updated the example removing the element from the list of tags too: http://jsfiddle.net/Wky2Z/8/
Added a data-value
for the tag links:
$(".target").append("<a href='#' class='tag' data-value='" + this.value + "' >" + this.value+'<span class="cross">X</span>'+ "</a>");
And modified 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;
});
});
For a full jQuery solution you can remove the inline remove_tag
function and use jQuery on
function. it works for dynamically created elements too.
Attach an event handler function for one or more events to the selected elements.
Here you can get the parent element of the deleted element and remove it from the DOM using remove
.
To "sync" the array with the current situation you can use grep
to delete the item from the array; note the removedItem
variable used to get the text only of the parent 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 = "";
}
});
});
Here's the updated link: http://jsfiddle.net/Wky2Z/6/
Move remove_tag
outside of keypress event handle and pass a this
pointer to it for quick solution:
//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 = "";
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.