Question

Hi I am trying to create a button dynamically and unable to get the icon on the button. I am unable to get the button to show icon. I would appreciate any help. How do I set close icon on the removeBtn button widget.

var a = [{
"_id": {
    "$oid": "50894875744e80aa5fa59853"
},
"name": "Test 1",
"color": "#b63e3e",
"propertyNames": ["Notes"]},
{
"_id": {
    "$oid": "50894afe744e80aa5fa59854"
},
"name": "Test 2",
"color": "#413bb6",
"propertyNames": ["Notes"]},
{
"_id": {
    "$oid": "50894c23744e80aa5fa59855"
},
"name": "Test 3",
"color": "#95eba5",
"propertyNames": ["Notes"]}];

for (var i = 0; i < a.length; i++) {

  var button = document.createElement('span');
  button.className = 'color-button';
  button.style.backgroundColor = a[i].color;

  var selectionItem = document.createElement('li');
  selectionItem.id = a[i]._id.$oid;
  selectionItem.className = "ui-widget-content";
  selectionItem.appendChild(button);

  selectionItem.appendChild(document.createTextNode(a[i].name));
  $('#id1').append(selectionItem);

  var removeBtn = $('<button/>',
            {
                    click: function(){
                    alert(this.parentNode.id);
                }
            });
  removeBtn.css("float","right");
  $("#"+a[i]._id.$oid).append(removeBtn);
}​

Here’s the jsFiddle link to the code:
http://jsfiddle.net/vivsriva/VmEeR/5/

Answer 1

Just a pointer to help you out. This is your code with more jQuery and includes jQueryUI’s Close icon on your close button:

for (var i = 0; i < a.length; i++) {
    var button = $("<span />").addClass("color-button").css({ "background-color": a[i].color }),
        selectionItem = $("<li />").prop({ id: a[i]._id.$oid }).addClass("ui-widget-content").css({ "background-color": a[i].color }).text(a[i].name).prepend(button);

    $('#id1').append(selectionItem);

    var removeBtn = $("<button />").css({ "float": "right", "margin-top": ".1em", "width": "1em" }).appendTo($("#"+a[i]._id.$oid));

    removeBtn.button({ icons: { primary: 'ui-icon-circle-close' }, text: false })
    .click(function(e) {
        alert(this.parentNode.id);
    });
}