Remove without destroying?

[jd0000]

How do you remove the easyui component without deleting the original element?
If i have

Code:

<select id='meh'>
<option value=1>one</option>
<option value=2>two</option>
</select>

then i make a combobox $('#meh').combobox(); ... now how do i get back to my original element? i want to remove the combobox. if i do $('#meh').combobox('destroy'), it disappears completely, including my html markup.
im trying to do this because i multiple selects where the values of one affect what is others. i havent been able to remove or hide options in a way that lets me get them back later if filtering option is changes again.

[stworthy]

No such feature is supported, you will have to extend it yourself. Here is the extended simple method to do this.

Code:

	$.extend($.fn.combo.methods, {
		removeme:function(jq){
			return jq.each(function(){
				var state = $.data(this,'combo');
				state.panel.panel('destroy');
				state.combo.remove();
				$(this).removeClass('combo-f combobox-f').show();
			});
		}
	});

Calling 'removeme' method will remove the combobox warping and restore to its original state.

Code:

$('#meh').combobox('removeme');

[jd0000]

perfect, thank you!

[jd0000]

actually now im not sure thats working. it removes some of it, but the combo and combobox data is still attached to the object.

[stworthy]

The 'removeme' method can be rewritten as:

Code:

	$.extend($.fn.combo.methods, {
		removeme:function(jq){
			return jq.each(function(){
				var state = $.data(this,'combo');
				if (state){
					state.panel.panel('destroy');
					state.combo.remove();
					$(this).removeClass('combo-f').show();
					$.removeData(this,'combo');
				}
			});
		}
	});
	$.extend($.fn.combobox.methods, {
		removeme:function(jq){
			return jq.each(function(){
				var state = $.data(this,'combobox');
				if (state){
					$.removeData(this,'combobox');
					$(this).removeClass('combobox-f');
				}
				$(this).combo('removeme');
			});
		}
	});