listitem - 动态删除

时间:2011-01-10 14:28:05

标签: jquery jquery-mobile

我已根据AJAX结果创建了列表。基本上将项目动态添加到列表中。但是在第二次ajax调用时,列表项追加到前面的项目。我想重新加载列表。它应该包含第二个ajax调用的结果。

我想单独删除所有列表项。不从页面中删除列表。

任何人帮助我。

动态添加列表值的代码:

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

5 个答案:

答案 0 :(得分:20)

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

这应该可以清除列表。

P.S。 如果你打算使用jQuery,那就使用它。

答案 1 :(得分:14)

如果你想删除所有内容,那么为什么不使用jQuery呢?

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

答案 2 :(得分:1)

这将有助于您创建像滑动删除一样的iPhone。这是参考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]);
              });
            });         

    });

};

用法:

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

答案 3 :(得分:0)

如果我理解你的问题,那么在添加新条目之前,你正试图清空列表视图。你可以这样做:

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"); 

答案 4 :(得分:0)

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