jQuery removeData behavior

Question

Here is the context - I am attempting to create an adaptive design where select boxes appear as jQuery Mobile selects on large screens and as MobiScroll selects on small screens. The original select in the HTML is written up like this

<select data-mini='true' data-inline='true' class='variants' data-role='none' style='display:none'>
  <option value='1'>Small</option>
  <option value='2'>Medium</option>
  <option value='3'>Large</option>
</select>

The

style='display:none'

bit is critical. Without it you end up with two controls on small screens - once the original select and then the mobiscroll styled select. This is not too well explained in the MobiScroll documentation.

In my document.ready code I put in something along the lines of

if (600 > $(window).width()) {
    $('.variants').scroller({
        preset: 'select',
        theme: 'android-
      ics',
        rows: 1,
        mode: 'scroller',
        display: 'inline',
        inputClass: 'i-txt',
        showLabel: false,
        width: 40,
        height: 20
    });
} else {
    $('.variants').css('display', 'inline-block').removeData('role');
}​

With this in place an unstyled browser select box shows up on large screens. I am attempting to take out the data-role bit via removeData because I want the select to appear as a jQuery Mobile select which is a whole lot prettier. However, this is not happening and removeData is not doing a thing. What I am doing wrong?

Answer 1

I figured it out! The point is that there is no need to remove the data-role = 'none' attribute. It only serves the purpose of telling jQuery not to attempt any upstyling on the element in question. However, if you then do something like

$('.variants').css('display', 'inline-block').selectmenu()

you are explcitly converting the .variants family of selects into a jQuery Mobile select menu so the data-role attribute does not enter into the picture at all. The modified code, which does what I sought is

if (600 > $(window).width()) {
$('.variants').scroller({
    preset: 'select',
    theme: 'android-
  ics',
    rows: 1,
    mode: 'scroller',
    display: 'inline',
    inputClass: 'i-txt',
    showLabel: false,
    width: 40,
    height: 20
});
} else {
$('.variants').css('display', 'inline-block').selectmenu();
}​

Answer 2

According to the jQuery docs .removeData()

The .removeData() method allows us to remove values that were previously set using .data(). When called with the name of a key, .removeData() deletes that particular value; when called with no arguments, all values are removed. Removing data from jQuery's internal .data() cache does not effect any HTML5 data- attributes in a document; use .removeAttr() to remove those.

It looks like you are using the HTML5 data-attribute in the document .. so use .removeAttr('data-role') instead