CODEWITHSUNDEEP
jqueryjquery-mobile
Finder
Finder

Reputation: 8711

listitem - Remove - dynamically

I have created the list based on the AJAX result. Basically dynamically add the items into the list. But In the second time ajax calling,the list item append to the previous items. I want to reload the list newly. It should contains results of second ajax calling.

I want to remove the all the list items alone.Not a list from the page.

Any one help me.

Code for dynamically add the list value:

var parent = document.getElementById('listview');
var listItem = document.createElement('li');
listItem.setAttribute('id','listitem_'+i);
listItem.innerHTML = "one";
parent.appendChild(listItem);
$(parent).listview("refresh");

Upvotes: 6

Views: 16936

Answers (5)

mayan
mayan

Reputation: 11

This will help you create a iphone like swipe delete. This is in reference to http://forum.jquery.com/topic/adding-an-iphone-style-swipe-to-delete-button-to-a-listview

EXERCISEDESCRIPTION.swipeDelete = function(exerciseSetsListview, callback) {

    var listViewJq = '#'+exerciseSetsListview;
    $(listViewJq).children().each(function(){
        var child = $(this);
        var childId = child.attr('id');
        var splitId = childId.split("_");
        var childIdVar = '#'+childId;
        var childIdBtnVar = splitId[0]+'_button_'+splitId[1];
        var childIdBtnVarJq = '#'+childIdBtnVar;

        $(childIdVar).bind('swiperight', function() {
              $(childIdVar).prepend('<a href="#" id="'+childIdBtnVar+'" class="aSwipeBtn" data-theme="b" data-inline="true" data-role="button">Delete</a>');
              $(childIdBtnVarJq).button();
              $(childIdVar).unbind('swiperight');
              $(childIdBtnVarJq).bind('click tap', function() { 
                  $(childIdVar).remove();
                  var splitButtonId = childIdBtnVarJq.split("_");
                  callback(splitButtonId[2]);
              });
            });         

    });

};

usage:

EXERCISEDESCRIPTION.swipeDelete('exerciseSetsListview',
    function(e) {
        EXERCISEDESCRIPTION.setsObj.splice(e,1);
        EXERCISEDESCRIPTION.repopulateSets();
    });

Upvotes: 1

naugtur
naugtur

Reputation: 16915

If you want to remove everything, then why not use jQuery to do so?

$('#listview').empty();

Upvotes: 14

Rumplin
Rumplin

Reputation: 2768

$('#listview').children().remove('li');

this should do the trick to clear the list.

P.S. If you intend to use jQuery, then use it.

Upvotes: 20

Van Coding
Van Coding

Reputation: 24534

function removeAllOptions(selectbox){
   var i;
   for(i=selectbox.options.length-1;i>=0;i--){
       selectbox.remove(i);
   }
}

Upvotes: 0

Poelinca Dorin
Poelinca Dorin

Reputation: 9703

If i understood you're question , you're trying to empty the listview before you add new entryes . You can do this in :

var parent = document.getElementById('listview');

//remove all childs here , or easyer with html()
parent.html('');

var listItem = document.createElement('li');
listItem.setAttribute('id','listitem_'+i);
listItem.innerHTML = "one";
parent.appendChild(listItem);
$(parent).listview("refresh");

Upvotes: 0

Related Questions