通过使用jquery和javascript单击另一个li来删除li

时间:2012-06-29 13:00:35

标签: javascript jquery html5 cordova

我在通过点击另一个页面上的另一个li来删除li时遇到问题..并且删除li id存在于localStorage变量中..

这里有两个div存在于同一页面上。 第一个li代码是

<div data-role="page" id="wishListPage" data-add-back-btn="true">
            <div data-role="header" data-position="fixed">
                <header id="mainHeader" align="center">
                    <a href="#"><img src="images/logoName.png" /> </a>
                </header>
            </div>
            <div data-role="content" data-theme="a" id="wishProducts">
                <ul id="wishList" data-role="listview"></ul>
            </div>
    </div>

li设置值来自数据库rs.rows.item(i).id

的属性
$("#wishList").append('<li id="'+rs.rows.item(i).id+'"><a href="index.html#removeProductDialogPage" data-role="button" data-rel="dialog" data-transition="slide" data-ajax="false" onClick=saveValuesInLocalStorage("'+rs.rows.item(i).id+'","'+rs.rows.item(i).productName+'","'+rs.rows.item(i).imageName+'","'+rs.rows.item(i).vendorImageName+'","'+rs.rows.item(i).fixedPrice+'","'+rs.rows.item(i).finalPrice+'","'+rs.rows.item(i).authorName+'","'+rs.rows.item(i).sharingUrl+'");>' +
                '<img src='+rs.rows.item(i).imageName+' id="itemImage"/>'+
                '<span id="dataName"><h4>'+pName+'</h4></span>' +
                '<p><span id="dataAuthorName">'+aName+'</span></p>' +
                '<p><span id="itemRsPrice">Rs.&nbsp;&nbsp;</span><span id="itemStrikePrice"><strike>'+rs.rows.item(i).fixedPrice+'</strike></span>&nbsp;&nbsp;<span id="itemPrice">'+rs.rows.item(i).finalPrice+'</p></span>'+'<img src='+rs.rows.item(i).vendorImageName+' id="itemSite"/></a></li>');
        }
        $("#wishList").listview("refresh");

这里wishList是ul的id .. 并存储在localStorage代码中..

function saveValuesInLocalStorage(productUrl, productName , productImageName , vendorImage , fixedPrice, finalPrice, authorName,sharingUrl){
    localStorage.sharingUrl  = sharingUrl;
    localStorage.productUrl = productUrl;
    localStorage.productName  = productName;
    localStorage.imageName = productImageName;
    localStorage.vendorImage = vendorImage; 
    localStorage.fixedPrice = fixedPrice;
    localStorage.finalPrice  = finalPrice;
    localStorage.authorName = authorName;
}

现在我要删除标识为localStorage.productUrl

的li

,对话框页面为:

<div data-role="content" data-theme="a">
            <ul name="options" id="options" data-role="listview">
                <li>
                    <a href="#" data-theme="a" data-ajax="false" onClick=" removeInfoDatabase()">
                        <p><span id="itemName"><h4>Remove from wish List</h4></span></p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);" data-theme="a" data-ajax="false"  onclick="openWebLink()">
                        <p><span id="itemName"><h4>Go to Store</h4></span></p>
                    </a>
                </li>
             </ul>
</div>

以下代码显示了phonegap SQLite代码。 removeInfoDatabase()函数是..

function removeInfoDatabase (){
    db.transaction(removeElement, removeError, removeSuccess);
}

function removeError(err){
    console.log("Error processing SQL: "+err.code);
    alert("couldn't remove from wish list");
}
function removeSuccess(){
    var elem =document.getElementById(localStorage.productUrl);
    elem.parentNode.removeChild(elem);
//  $("#"+localStorage.producturl).remove();
//  var mm = $("#"+localStorage.producturl).html();
//  alert(""+mm);
    $("#wishList").listview("refresh");
    alert("item is removed successfully");
    history.back();
}
function removeElement(tx){
    tx.executeSql('CREATE TABLE IF NOT EXISTS itemDetail (id unique, productName , imageName, vendorImageName , fixedPrice , finalPrice , authorName , sharingUrl)');
    tx.executeSql('DELETE  from itemDetail where id="'+localStorage.productUrl+'"');
}

现在如何在点击Remove From WishList li后删除wishList li 请帮帮我..拜托 提前谢谢..

1 个答案:

答案 0 :(得分:1)

假设这两个页面位于同一个站点上(这样它们共享相同的localStorage对象),最简单的选择是在页面上使用setTimeout(),这将删除该元素,调查本地存储是否存在ID。

function pollStorage() {
    var id = localStorage.id;
    if (typeof id !== 'undefined') {
        delete localStorage.id;
        $(id).remove();
    }
    setTimeout(pollStorage, 100);
}

pollStorage();