CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
manix
manix

Reputation: 14747

Delete specific elements from controlgroup in Jquery Mobile

Take a look at this list of three items:

<div id="results" data-role="controlgroup">
    <input name="first" id="radio1" value="on" type="radio">
    <label for="radio1">One</label>
    <input name="second" id="radio2" value="off" type="radio">
    <label for="radio2">Two</label>
    <input name="third" id="radio3" value="other" type="radio">
    <label for="radio3">Three</label>
</div>

To empty the controlgroup I just do:

var $group = $("#results").controlgroup();
$group.controlgroup("container").empty();
$group.controlgroup("refresh");

But, when I try to remove all elements except the first one (first input and first label) I do this with no positive result:

var $group = $("#results").controlgroup();
$group.controlgroup("container").not('input[name="first"], label[for="radio1"]').remove();
$group.controlgroup("refresh");

The code above deletes all items from controlgroup as you can see in this fiddle. Do you have advice on how can I achieve this action? Thank you in advance.

Upvotes: 2

Views: 215

Answers (1)

dfsq
dfsq

Reputation: 193271

jQuery mobile wraps input-label pairs into another container for styling. Hence, you need to select those children except the first and remove them:

$("#delete-except").on("click", function (e) {
    var $group = $("#results").controlgroup();
    $group.controlgroup("container").children(':not(:first)').remove();
    $group.controlgroup("refresh");
});

Demo: http://jsfiddle.net/qf9rL6L9/2/

Upvotes: 2

Related Questions