Question

I have a form that uses jQuery-UI’s selectable plugin to populate a list from a table. My form also allows users to remove single or multiple list items if they change their minds. This function works in IE and Firefox. The list is also automatically cleared and the form reset if the user chooses to download their list. This also works in IE and Firefox.

Lastly, I added a button that removes all the list items and resets the form if the user wants to start from fresh. This function only works in Firefox. In IE, the list items are removed from the field they are in, but for some reason $('#newgroups').removeData() is ignored. I know this because after .remove or .tofile I can add a group that has the same name as an earlier but no longer present group. After .clear, though the form looks the same, creating a list item with a previously used group name fails.

Here is the code (I’ve left out function bodies that aren’t involved with removing list items or resetting the form):

$(function(){
    $('#selectable').selectable({
         //rules for how table elements can be selected
    });

    $("input[name='makegroup']").live("click", function(event){
        //adding list items
    });

    $("input[name='removegroup']").live("click", function(event){
        event.preventDefault();
        groups.msg();
        groups.remove(); //works in FF and IE
    }); 

    $("input[name='cleargroups']").live("click", function(event){
        event.preventDefault();
        groups.msg();
        return groups.clear(); //partially fails in IE
    });

    $("form#grouper").submit(function(){
        return groups.tofile(); //works in FF and IE
    });

    groups={
        grpmsg: $('#grpmsg'),
        grpselections: $('#newgroups'),
        grpname: $("input[name='newgroup']"),
        filetext: $("input[name='filetext']"),

        add: function(){
            //add option to this.grpselections and set this.grpselections.data
            //compares input data to $grpselections.data() for problems and throws error if necessary               
        },

        remove: function(){
            var vals= this.grpselections.val();//selected list items
            for(var i in vals){
                this.grpselections.data(vals[i]).removeClass('ui-selected chosen');
                this.grpselections.removeData(vals[i]);
            }
            this.grpselections.find(':selected').remove();
            this.grpname.focus();
        },

        clear: function(){ //identical to tofile method of resetting form
            this.grpselections.empty();
            this.grpselections.removeData();//DOES NOT WORK IN IE
            $('#selectable td').removeClass('ui-selected chosen');
            this.grpname.focus();
            return true;
        },  

        tofile: function(){
            this.grpselections.select();
            var gtxt='';
            this.grpselections.find('option').each(function(i){
                gtxt += $(this).text() + "\n";
            });
            if (gtxt.length === 0) {
                this.msg('nonetofile');
                return false;
            }
            this.filetext.val(gtxt);

            //BELOW IS IDENTICAL TO clear function EXCEPT IT WORKS IN IE TOO
            this.grpselections.empty();
            this.grpselections.removeData();
            $('#selectable td').removeClass('ui-selected chosen');
            this.grpname.focus();
            return true;
            //END INTERESTING BIT
        },

        msg: function(msgtype){
                //show error message specific to problem
    },

        addline: function(groupname){
            //auxilliary to add function                
        }
    };

});

Answer 1

Well first to confess I have not used the selectable stuff at all, SO given that, a shot in the dark, can you chain?

this.grpselections.empty().removeData();