jQueryMobile remove input field

Question

I want to remove input fields when certain events happen using jQuery:

$('#myInputId').remove();

But if I try it, the surrounding div, which is automatically added by jQueryMobile, is not being removed. So the user still sees a div, which looks like an input field, but which is obviously not usable because the inner input is not there any more.

Does jQueryMobile offer something which is guaranteed not to break when the next upgrade shows up?

Which input filed? In jQuery Mobile, input type="text" don't have parent div container. — Gajotres
– Gajotres, Commented Apr 10, 2013 at 12:30
I use the new Version 1.3 and the input with type="text" have a surrounding div with class "ui-input-text" (and several other classes). — Pascal Klein
– Pascal Klein, Commented Apr 10, 2013 at 12:38

Omar · Accepted Answer · 2013-05-20 15:39:15Z

5

To remove Text-input field using .closest(); since the parent DIV is added by jQuery Mobile and cant have an ID.

Demo

$('.selector').closest('div').remove();

To remove its' label

$('.selector').closest('div').prev('label').remove();

jQuery Mobile renders Text-input this way. It wraps it with a div and placed the label before it with no enhancement. It enhances the input by adding <a> and <span> to style textbox.

<label>Text Input</label>

<div>
 <input type="text" />
  <a href="#">
   <span>
    <span>&nbsp;
    </span>
   </span>
  </a>
</div>

edited May 20, 2013 at 15:39

answered Apr 10, 2013 at 12:39

Omar

31.7k9 gold badges73 silver badges117 bronze badges

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

Comments

Smern · Accepted Answer · 2013-04-10 12:25:57Z

1

try removing its parent, if the div is the direct parent..

$('#myInputId').parent().remove()

http://jsfiddle.net/F45Mg/

answered Apr 10, 2013 at 12:25

Smern

19.1k22 gold badges77 silver badges93 bronze badges

3 Comments

Pascal Klein Over a year ago

I am a little bit afraid that the code breaks as soon as jQueryMobile decides to change in the behaviour in the feature or for certain browsers. But thanks.

Smern Over a year ago

Why? If this is the case, you haven't given enough to go off of. I said "if the div is the direct parent", if this is not the case... you can make it more specific, go to a certain ancestor based on a certain ID or whatever would fit your case.

Pascal Klein Over a year ago

The div is automatically added by jQueryMobile. So I cannot give it any specific ID. I can obviously look at the classes it has, but I could imagine jQueryMobile changing them in the future. So I would love to use a method that jQueryMobile offers which is guaranteed to not break in the future.

writeToBhuwan · Accepted Answer · 2013-04-10 12:41:12Z

0

 $('#myInputId').parent().remove();

edited Apr 10, 2013 at 12:41

answered Apr 10, 2013 at 12:34

writeToBhuwan

3,28111 gold badges42 silver badges67 bronze badges

1 Comment

Smern Over a year ago

the reason that is working is because you just modified my jsfiddle (in which i manually added a sample div) and checked the jquery mobile box (which automatically adds a div), making two div wrappers.

Collectives™ on Stack Overflow

jQueryMobile remove input field

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related