在 jquery 列表中的每一行前面添加一个删除图标答案

【问题标题】：add a delete icon in front of each row in list in jquery在 jquery 列表中的每一行前面添加一个删除图标
【发布时间】：2015-08-28 06:44:10
【问题描述】：

我有一个列表控件，在运行时当我将数据绑定到控件时，我想在 jquery 中的每一行附加一个删除图标或一个按钮，以便我可以根据需要删除一行。这是我用来将数据绑定到控件的代码。

$(response.aaData).each(function (index, val) { 
    $("#multiselectSubCat")
        .append($('<option></option>').val(val.SubCategoryId).html(val.SubCategoryName)); 
});

渲染

<select name="from" id="multiselectSubCat" multiple="multiple" style="width: 300px; top: 100px">
 <option value="9">Category1</option>
 <option value="10">Category2</option>
 <option value="11">Category3</option>
 <option value="12">Category4</option>
 <option value="13">Category5</option>
 <option value="22">Category6</option>
</select>

【问题讨论】：

你能为它创建一个小提琴吗？
我不知道该怎么做。我是这个社区的新手。
那是select控制吗？？好像是！！那么你就不能直接将它附加到选择的option 中！你只需要创建一个自定义的select 来实现这个
不确定你想要什么...这是一个选择？你想在哪里追加删除按钮？
显示渲染的 html，也许去 jsfiddle.net 展示一个例子

标签： javascript jquery html

【解决方案1】：

我想知道您是否希望输入按钮或图像向用户显示您可以删除特定记录？

我做了一个添加背景的例子。

.select-box {
  height: 400px;
}
.select-box option {
  background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat;
  padding-left: 25px;
  cursor: pointer;
}
.select-box option:hover {
  background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat #eee;
}

<select name="from" id="multiselectSubCat" multiple="multiple" class="select-box" style="width: 300px; top: 100px">
  <option value="9">Category1</option>
  <option value="10">Category2</option>
  <option value="11">Category3</option>
  <option value="12">Category4</option>
  <option value="13">Category5</option>
  <option value="22">Category6</option>
</select>

【讨论】：

这更像是一个评论而不是一个实际的答案
嗨..谢谢..是的，这可能是我希望列表的样子。我想添加一张图片（十字符号）。
可以在选择中添加图标，但是看不到用户是点击了删除还是只是选择了选项
嗨 mplungjan 你可以使用 javascript。如果您想更改图片，Gaurav 只需更改 CSS 中的背景图片链接
没有。您无法单击下拉菜单中的图标并看到您单击了背景的图标部分

【解决方案2】：

以此为基础 How can I use <ul> list instead of <select> dropdown for the languages switcher?

试一试：

var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');

nav.click(function(event) {
    if (nav.hasClass('active')) {
        nav.removeClass('active');
        selection.stop().slideUp(200);
    } else {
        nav.addClass('active');
        selection.stop().slideDown(200);
    }
    event.preventDefault();
});

select.click(function(event) {
    // updated code to select the current language
    select.removeClass('active');
    $(this).addClass('active');

    alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});

$(".del").on("click",function(e) {
  e.preventDefault();
  $(this).parent().remove();
});

h2 {
    width: 200px;
    background: #222;
    color:  #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}

ol
{
    list-style-type: none;
}


ol.select {
    display: none;
}

ol.select > li {
    width: 200px;
    background: #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}

ol.select > li:hover {
    background: #aaa;
}
.select a { text-decoration:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
    <li data-value="en"><a class="del" href="#">X</a> English</li>
    <li data-value="de"><a class="del" href="#">X</a> Deutsch</li>
</ol>

【讨论】：

【解决方案3】：

你做了正确的事，只需要一点点改变

<a href="http://jsfiddle.net/ajaymalhotra15/2tmntdft/" > click here to see code </a>

【讨论】：