天天看點

H5進行動态添加元素,删除元素

H5進行利用js進行動态添加資料

其中最主要的是進行ID的指派操作,每次添加相對應的ID需要進行加1,

在删除時,通過ID除過來相關的ID進行删除

還有就是删除最後一個添加的元素時,再次追加時的ID判斷

這裡使用的方式如下:

在删除元素之後,查詢DIV下追加的共同元素的個數,然後取最後一個ID,在其後進行追加相關的元素

具體實作如下:

<div class="systemList">
    <ul id="system_ul">
        <li id="system_ul_li1" class="system_li_num">
            <div class="delete" id="del_system_button1"  onclick="delete_system(1)">
            删除           
            </div>
        </li>
    </ul>
</div>
           

在ul下增加li控件,點選添加按鈕

var id = ;
function add_system(){
//擷取所有class的資料
    var all_inner_div = $(".system_li_num");
    //擷取最後一個元素的ID,注意對象的轉換不能直接使用,因為$和dom對象使用不同,這個需要注意
    //all_inner_div[all_inner_div.length - 1].attr("id");會報錯找不到
    var last_id = $(all_inner_div[all_inner_div.length - ]).attr("id");
    $("#"+last_id+"").after("<li class='system_li_num' id='system_ul_li"+id+"'><div class='delete' id='del_system_button1' onclick='delete_system"+id+"'</li>")
    //ID自增
    id++;
}
           

删除方法:

通過傳過來的ID,進行移除

function delete_system(flag){
//根元素不删除
    if(flag == ){
        alert("cancel");
    }else{
        document.getElementById("system_ul_li" + flag + "").remove();
    }
}
           

完成,基本的增加删除就可以實作了

繼續閱讀