Jquery - переключение типа ввода - как удалить ненужный элемент div с помощью Jquery?

Question

Я пытаюсь настроить кнопку ввода счетчика, которая может иметь 2 состояния:

(a) input type = "number" в настольных браузерах
(b) input type = "button" в мобильных браузерах

Таким образом, пользователи на мобильном устройстве могут щелкнуть, чтобы увеличить счетчик, а пользователи на рабочем столе могут вводить суммы с клавиатуры. Также имеется кнопка для переключения между состояниями.

Вот рабочий пример

Он основан на Jquery Mobile, поэтому я переключаюсь между следующими структурами элементов:

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

Мой вопрос касается div, который мне пришлось вставить, потому что я не мог заставить его работать в Jquery без него.

Может кто-нибудь сказать мне, как избавиться от этого div, изменив мою формулу jquery?

Спасибо за помощь!

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 - к документу готов

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();

Удалит первый уровень div внутри класса .entry.

Answer 2

Я думаю, что одной из ваших проблем является:

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

Потому что вы "зацикливание "каждого из вас inputElements и запрос родительского div.

Попробуйте удалить этот" parent ('div') "и посмотрите, будет ли он работать без этого фиктивного div.