How to get parent element in jQuery when child element is known?

Question

I'm using jQuery Mobile which creates a lot of the DOM for you. I need to remove() radio buttons, but based on how the HTML is constructed in jQuery Mobile, I do not have an id for the parent div. I can easily grab both the input and labels, but need to also get rid of the our div to completely removed the entry styling from the list of radio buttons.

<div class="ui-radio">
  <input type="radio" value="ahBkMj" id="ahBkMj" name="spam" data-theme="c">
  <label for="ahBkMj" class="ui-btn ui-btn-icon-left ui-btn-up-c">
    <span class="ui-btn-inner">
      <span class="ui-btn-text">Foo</span>
      <span class="ui-icon ui-icon-ui-icon-radio-off ui-icon-radio-off"></span>
    </span>
  </label>
</div>

Solution 1

Will jQuery's .parent() do ?

Solution 2

Since the <div> element is the immediate parent of your <input> element, you can use the aptly-named parent() method:

$("#ahBkMj").parent().remove();

In the general case, if you want the first ancestor matching a selector, you can use closest():

$("#ahBkMj").closest("div").remove();

Note, however, that closest() includes the element itself in its search.

Comments

[Phill Pafford]

why not toggle them? show/hide?

[Pointy]

also of interest may be ".closest()"

[Will Curran]

Thanks, didn't know about parent.

[naugtur]

.parent() was there before jquery. It is a method of DOMelement object in JavaScript.