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 태그를 클릭 한 후 list-item 및 select 옵션을 제거하는 방법을 모르겠습니다.

Answer 1

내가 전에 selectList의 사용,하지만하지 않은 빠른 눈과 몇 가지 빠른 jsfiddle work (필자는 selectList의 예 중 하나를 빌려)는 selectList의이 취할 수 있어야 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 요소로 돌아가서 제거 할 항목의 값을 사용하여 remove 함수를 호출하면됩니다. selectList는 다음을 통해 저장합니다. data()를 값으로 사용하십시오.

insertAfter도 완전히 필요하지 않으므로 제거했습니다. onAdd 함수에서 'append'변경 사항에 유의하십시오. .delete 스팬이 포함 된 요소가 아닌 다음 요소에 있어야하는 경우, 형제 선택기를 사용하거나 생성시 스팬에 데이터를 첨부해야합니다. 또는 유사한 방법을 사용하십시오.

참고 : 선택 목록을 즉석에서 만드는 경우 .on을 포함하는 항목에 첨부해야하며 특정대로 유지하려면 선택기를 '.selectlist-item .delete'으로 변경해야합니다.