add a delete icon in front of each row in list in jquery

Question

I have a list control and at run time when I bind data to the control I want to append a delete icon or a button to each row in jquery, so that I can delete a row if I want to. Here is the code that I am using to bind data to the control.

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

Rendered

<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>

Is that `select` control?? It seems to be!! Then you just directly cannot append it into `option` of select!! You just need to create a custom `select` to achieve this — Guruprasad J Rao, Jun 12 '15 at 09:46
Not sure what you want...This is a select? where do you want to append the delete button? — Nimeshka Srimal, Jun 12 '15 at 09:49
Show the rendered html and perhaps go to jsfiddle.net to show an exapmple — mplungjan, Jun 12 '15 at 09:50
yes. it is a select control. I've tried multiple this but norhing seems to work. Can you please give an example @GuruprasadRao — Gaurav Sachdeva, Jun 12 '15 at 09:50
@mplungjan : yes, its a select control. I want to append a delete icon in front of each row in select control. — Gaurav Sachdeva, Jun 12 '15 at 09:50
You might just need to use some `plugins` but I am not sure whether any plugins are out there to achieve this behavior and if you opt to any one plugin you need to modify it.. — Guruprasad J Rao, Jun 12 '15 at 09:53
here is html that was rendered. I want to add a delete button in front of each option. @mplungjan — Gaurav Sachdeva, Jun 12 '15 at 09:54
That is impossible. You will need to use a widget to change the select to something else — mplungjan, Jun 12 '15 at 09:55
you cant do this in select.... if you want to delete an option,then you just load the option value in list and do your delete function — Gayathri, Jun 12 '15 at 10:00
Is there any I can append

tags while I bind the data? @mplungjan — Gaurav Sachdeva, Jun 12 '15 at 10:10

score 0 · Accepted Answer · edited Jun 12 '15 at 11:43

0

I want to know whether you want input button or image to show user that you can delete particular record?

I have made an example where I am adding background.

.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>

edited Jun 12 '15 at 11:43

mplungjan

169,008
28
173
236

answered Jun 12 '15 at 10:35

Ajay Malhotra

798
4
16

1

this is more a comment than an actual answer – maRtin Jun 12 '15 at 10:39
Hi.. Thank you..Yes this is probably what I want the list to look like. I want to add an image (cross sign). – Gaurav Sachdeva Jun 12 '15 at 11:17
You can add the icon to the select, but you cannot see if the user clicked the delete or just selected the option – mplungjan Jun 12 '15 at 11:44
Hi mplungjan That You can do using javascript. and Gaurav just change the background image link in css if u want to change image – Ajay Malhotra Jun 12 '15 at 11:48
No. You cannot click on the icon in a dropdown and see you clicked the icon part of the background – mplungjan Jun 12 '15 at 11:50
Ya ryt u cant click on image, u r clicking on option tag full – Ajay Malhotra Jun 12 '15 at 11:52
In Javascript using value of option tag u can delet particular record – Ajay Malhotra Jun 12 '15 at 11:53
what do u want exactly? do u want input type="button" ? – Ajay Malhotra Jun 12 '15 at 11:54
@user3233135 : I think it wont serve any purpose if we cannot identigy whether user clicked on image or the row. This is because on click of a row I am using another event which populates data in another control. yes, the alternate option could be a button. Can we add a button to the same? (But an image would have been a better option if it were possible) – Gaurav Sachdeva Jun 12 '15 at 12:10

score 0 · Answer 2 · edited May 23 '17 at 11:43

Building on this How can I use <ul> list instead of <select> dropdown for the languages switcher?

have a go at this:

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>

score 0 · Answer 3 · answered Jul 29 '15 at 11:15

0

U did the right thing just little changes required

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

answered Jul 29 '15 at 11:15

Ajay Malhotra

798
4
16

add a delete icon in front of each row in list in jquery

3 Answers3