如何將刪除按鈕添加到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'以保持其特定性。