Question

I’m trying to set up a counter input button which can have 2 states:

(a) input type=”number” on desktop browsers
(b) input type=”button” on mobile browsers

This way users on mobile can click to increase the counter and users on desktop can enter amounts via keyboard. There is also a button for users to switch between both states.

Here is a working example

It’s based on Jquery Mobile, so I’m switching between the following element structures:

initial:   div.entry
             div.SHOULD-NOT-BE-HERE
               input

type:      div.entry
            label
              input

click:     div.entry
             div.ui-btn
               span.ui-btn-inner
                 span.ui-btn-text   
               input

My question is regarding the div I had to put in, because I couldn’t get it to work properly in Jquery without it.

Can someone tell me how to get rid of this div by modifying my jquery formula?

Thanks for help!

HTML:

<div class="switchInput">
  <input type="button" class="switchInputType" value="click-type" />
</div>

<div class="entry">
   <div> <!-- THIS DIV SHOULD NOT BE HERE -->
     <input type="button" name="m22" id="m22" value="777" class="inputElement" /> 
   </div> 
</div>

Jquery – on document ready

if ( $('html').hasClass('touch-device')) { } else { typeNow(); }

$('.switchInputType').live('click', function() { 
  $(this).val() == "type" ? clickNow() : typeNow();
  });

function clickNow() {
  $('.inputElement').each(function(index) {
     var keeper = $(this).prev('label').text();
     $(this).replaceWith('<div class="ui-btn ... "><span class="..."><span class="...">'+keeper+'</span></span><input type="button" value="'+keeper+'" name="'+this.name+'" id="'+this.id+'" class="inputElement ui-btn-hidden" /></div>');
     });
  $('.inputTextLabel').remove();
  }

 function typeNow() {
   $('.inputElement').each(function(index) { 
      var keeper = $(this).val();
      $(this).parent('div').before('<label for="'+this.id+'" class="inputTextLabel">'+keeper+'</label>');
      $(this).parent('div').replaceWith('<input type="text" value="" name="'+this.name+'" id="'+this.id+'" title="'+this.value+'" value="" class="typer inputElement" />');
      });
   }

Answer 1

$('.entry > div').remove();

Will remove first level of div’s inside .entry class.