Question

Well here is my code to do it.

But as you can see, its ugly.

Anyone got any better ideas?

.delegate(".ui-icon-plus", "click", function() {
  var d = $(this).parent().data("val");
  var values = $(obj).val();
  values.push(d);
  $(obj).val(values);
  $(this)
    .removeClass('ui-icon-plus')
    .addClass('ui-icon-minus')
    .attr('title', 'Remove keyword from template')
    .parent().appendTo('div .keyword-left .ui-widget');
})
.delegate(".ui-icon-minus", "click", function() {
  var d = $(this).parent().data("val");
  var values = $(obj).val();
  var idx = values.indexOf(d); // Find the index
  if(idx!=-1) values.splice(idx, 1); // Remove it if really found!
    $(obj).val(values);
  $(this)
    .removeClass('ui-icon-minus')
    .addClass('ui-icon-plus')
    .attr('title', 'Use keyword in template')
    .parent().appendTo('div .keyword-right .ui-widget');
});

Answer 1

What you have works, you could slim it down with a dual class .toggleClass() call on each, but there is one problem area. .indexOf() isn’t available on Arrays in IE<9, so I’d either add .indexOf() or use $.inArray() here, like this:

.delegate(".ui-icon-plus", "click", function() {
  var d = $(this).parent().data("val");
  var values = $(obj).val();
  values.push(d);
  $(obj).val(values);
  $(this).toggleClass('ui-icon-plus ui-icon-minus')
         .attr('title', 'Remove keyword from template')
         .parent().appendTo('div .keyword-left .ui-widget');
})
.delegate(".ui-icon-minus", "click", function() {
  var d = $(this).parent().data("val");
  var values = $(obj).val();
  var idx = $.inArray(d, values); // Find the index
  if(idx!=-1) values.splice(idx, 1); // Remove it if really found!
  $(obj).val(values);
  $(this).toggleClass('ui-icon-plus ui-icon-minus')
         .attr('title', 'Use keyword in template')
         .parent().appendTo('div .keyword-right .ui-widget');
});