如何将删除按钮添加到jQuery selectList插件

Question

我想删除单击列表项上的任意位置以便将其删除的默认功能。相反，我想添加一个删除列表项的自定义删除按钮。这是迄今为止我所拥有的。

<pre> 
var sl = $('select#api_product').selectList({ 
    instance: true, 
    clickRemove: false, 
    onAdd: function (select, value, text) { 
    $('.selectlist-item').last().after('<span class="delete"></span>'); 
    } 
}); 
$('<span class="delete"></span>').insertAfter('.selectlist-item').last(); 
</pre> 

使用此代码，我可以删除列表项目上的点击目标并添加具有删除图标作为bg图像的span标签。但是，我不知道如何在单击span标签后删除列表项和选择选项。

Answer 1

我以前没有使用过的SelectList，但看一眼就和一些快速jsfiddle work（我借来的选择列表的例子之一），它使得它看起来像加委派的事件处理程序选择列表的归类ul应该能够采取照顾它。

需要注意的一点是，选择最简单的方法是将.delete跨度放在合适的li之内。就我个人而言，我认为它也是最接近于语义正确的，因为删除“属于”该特定的li。有几个不同的方式来处理的方法，其中删除是li的外侧，并且不应该太难搞清楚，但是这是更快地达到工作示范给我：

var sl = $('select#simple-usage-select-1').selectList({ 
    instance: true, 
    clickRemove: false, 
    onAdd: function (select, value, text) { 
    $('.selectlist-item').last().append('<span class="delete"></span>'); 
    } 
}); 

$('.selectlist-list').on('click', '.delete', function(event) { 
sl.remove($(this).parent().data('value')); 
}); 

基本上selectList具有一个特定的remove(value)函数，然后删除元素并在列表中取消选择它，您只需返回到您的selectList元素并使用要删除的项目的值调用该删除函数，该selectList存储通过data（）作为值。

我也删除了你的insertAfter，因为它看起来完全没有必要。请注意0​​函数中对“追加”的更改。如果您的.delete跨度必须位于下列而不是包含的元素中，那么您将需要使用兄弟选择器，或者在创建时将数据附加到跨度，或者使用类似的方法。

注意：如果您正在创建您的选择列表，您需要将.on附加到包含它们的内容，并且可能会将选择器更改为'.selectlist-item .delete'以保持其特定性。