Remove element from listview JQuery Mobile

Question

When I uncheck an item I want it to be removed from the listview. Removing all items -not a problem. Neither is first item or last.

$("input[type = 'checkbox']").change(function(){
            var item=$(this);
            var elementName = $(item).attr('class');
            if(item.is(":checked")){  
             $('#myTB').append($('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('<label><input type="checkbox" name="checkbox" checked/>' + elementName + '</label>').attr('id', elementName));

            } else { 

               $('#' + elementName).remove();
               $('#myTB:visible').listview('refresh');

            }
    });

Cant seem to figure out what I'm doing wrong here.

HTML- at the point of the original "check"

<div id="checkboxes3" data-role="fieldcontain">
  <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
    <input id="checkbox8" name="addTo" data-theme="b" type="checkbox" class="Colgate Total Plus Whitening Toothpaste">
    <label for="checkbox8"> add to  </label>
  </fieldset>
</div>

HTML dynamically updated listview - listview gets populated when checks are made to multiple items

<div data-role="content">
    <ul id="myTB" data-role="listview" data-divider-theme="b" data-inset="true">

         /* dynamically added */
    </ul>
</div>

Not useful without its HTML.

Gajotres
– Gajotres

2013-05-24 14:55:44 +00:00
Commented May 24, 2013 at 14:55 — Gajotres
– Gajotres, Commented May 24, 2013 at 14:55
Does item have more than one class ?

adeneo
– adeneo

2013-05-24 15:00:12 +00:00
Commented May 24, 2013 at 15:00 — adeneo
– adeneo, Commented May 24, 2013 at 15:00

adeneo · Accepted Answer · 2013-05-24 15:13:29Z

2

When you change a checkbox and get it's class using $(item).attr('class') the entire string is returned, so your selector looks like:

$('#Colgate Total Plus Whitening Toothpaste').remove();

and that won't work!

There is no ID in your markup matching any of those classes, so it's kinda hard to tell what you're really trying to select, but try something like :

$('#myTB').on('change', 'input[type="checkbox"]', function(){

    var elementName = this.className.replace(/\s+/, '_'),
        $element    = $('#' + elementName);

    if ( this.checked && $element.length === 0 ){  
         var li    = $('<li />', {'class':'ui-li ui-li-static ui-btn-up-c ui-li-last'}),
             label = $('<label />', {'for': elementName}),
             input = $('<input />', {type:'checkbox', 
                                     name:'checkbox',  
                                     text: elementName,
                                     id  : elementName
                                    }
                     ).prop('checked', true);

         $('#myTB').append(li, label, input);
    } else { 

           $element.remove();
           $('#myTB:visible').listview('refresh');
    }
});

edited May 24, 2013 at 15:13

answered May 24, 2013 at 15:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

rlegs Over a year ago

I hear you. When an item is added to the listview I added the attr('id', elementName) thinking that this is the id that I can use to select.

tymeJV · Accepted Answer · 2013-05-24 15:13:20Z

1

I noticed a few things:

Like @adeneo said, you're returning a whole list of classes, then setting that as an ID, that won't work.
Because your setting that list of classes as an ID each time, you're re-using ID's, where as each ID should be unique.
Your added checkboxes never fire the change() event because they do not exist at DOM ready, you need event delegation.

With that said, I made a quick demo where checking the addTo checkbox adds another checkbox (default state: checked), and un-checking the dynamic boxes removes them. I hope it helps.

$(document).on('change', 'input:checkbox', function(){
    var elementClass = this.className;

    if (this.checked) {
        $("#myTB").append("<li><input type='checkbox' class='appended' checked/>Dynamic Box!</li>");
    } else if (this.id != "checkbox8") {
        $(this).parent("li").remove();
    }
});

Demo: http://jsfiddle.net/gNN6B/1/

answered May 24, 2013 at 15:13

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

rlegs Over a year ago

Thanks tymeJV. I guess further explanation is warranted. I have hundreds of items...all with a checkbox to add to a list that goes to a different page(myTB) that lists all the items once they have been checked. From that original item page if i uncheck the checkbox I want that item removed from the list. So checking if "checkbox8" is checked will not work for every item only one item.

Collectives™ on Stack Overflow

Remove element from listview JQuery Mobile

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related