创建stackoverflow标记系统？

Question

我想创建一个标签系统就像SO一样。 我已添加标签，现在我想删除它们。

MyQuestion：

• 如何删除附加的标签？
• 我该如何让十字按钮（跨度）与SO标记系统中的十字按钮看起来相同？

SO TAGGING

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 = ""; 
    } 
}); 

Answer 1

这里是我的jsfiddle：http://jsfiddle.net/Wky2Z/11/

基本上，侦听.cross被点击，然后从阵列和删除元素删除

//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(); 
}); 

至于十字架的外观，SO使用一个CSS雪碧，所以你可以做同样的做一个PNG或GIF或JPEG格式两种状态，关闭（灰色）和悬停（红色）和切换background-position到红色的CSS例如：.cross:hover { background-position:0px -20px }

Answer 2

下面是更新链接：http://jsfiddle.net/Wky2Z/6/

移动remove_tag按键事件处理外，并通过一个this指针，它快速的解决方案：

//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 = ""; 
     } 
    }); 
}); 

Answer 3

你可以删除使用的元素。 另外，我建议你使用jQuery事件而不是使用内联事件。 （如果你看看stackoverflow的源代码，你会注意到没有内嵌的javascript调用）

在这种情况下，您需要添加一个事件处理程序到document对象，因为您想将事件分配给元素从一开始就没有加载到DOM中。

$(document).on('click', '.tag span', function(){ 
    $(this).parent().remove(); 
}); 

活生生的例子：http://jsfiddle.net/Wky2Z/7/

更新

我更新的例子，从标签列表中也删除元素： http://jsfiddle.net/Wky2Z/8/

添加了标签链接data-value：

$(".target").append("<a href='#' class='tag' data-value='" + this.value + "' >" + this.value+'<span class="cross">X</span>'+ "</a>"); 

并修改了点击事件：

$(document).on('click', '.tag span', function(){ 
    $(this).parent().remove(); 
    var removeItem = $(this).parent().data('value'); 

    tags = $.grep(tags, function(value) { 
     return value != removeItem; 
    }); 
}); 

Answer 4

对于一个完整的jQuery溶液可以去除内嵌remove_tag功能和使用jQuery on功能。它也适用于动态创建的元素。

将一个或多个事件的事件处理函数附加到 所选元素。

在这里，您可以获取已删除元素的父元素，并使用remove将其从DOM中删除。

要将阵列与当前情况“同步”，您可以使用grep从阵列中删除项目;请注意0​​变量仅用于从文本中获取排除子项的父项的文本。

代码：

//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 = ""; 
     } 
    }); 
}); 

演示：http://jsfiddle.net/IrvinDominin/pDFnG/