Jquery - switch input type - how to remove unneccessary div element using Jquery?

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" />');
      });
   }

Deele · Accepted Answer · 2011-09-05 23:29:31Z

1

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

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

answered Sep 5, 2011 at 23:29

Deele

3,6792 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frequent Over a year ago

that worked, although I'm not happy with the outcome... thanks though

Marcelo Assis · Accepted Answer · 2011-09-05 23:31:43Z

0

I think one of your problems is the:

$(this).parent('div').before...

Because you are "looping" each one of yours inputElements and asking for a parent div.

Try removing this "parent('div')" and see if it will work without that dummy div.

answered Sep 5, 2011 at 23:31

Marcelo Assis

5,2153 gold badges36 silver badges56 bronze badges

Collectives™ on Stack Overflow

Jquery - switch input type - how to remove unneccessary div element using Jquery?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related