Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

点击li列表的删除按钮，删除它在storage中存储的对应数据。

0 votes
404 views
in Technique[技术] by (71.8m points)

点击li列表的删除按钮，删除它在storage中存储的对应数据。

` 每次点击按钮会输出全部的数据，我想取对应的值删除
// html部分

    <template id="tpl">
        <li class="mui-coll-li">
            <button type="button" class="mui-coll-btn mui-btn mui-btn-outlined">刪除</button>
            <div class="mui-table-view-cell mui-collapse">
                         </div>
                  </li>
         </template>

// js部分

mui(document.body).on('tap', '.mui-coll-btn', function (e) { 
        // $(this).parents('li.mui-coll-li').remove() 
        // myStorage.removeItem('li.mui-coll-li'); 
        // console.log(inventoryList) 
        // inventoryList：现有存储的三条数据 
        for (var i = 0; i < inventoryList.length; i++) {                console.log(inventoryList)
        }
    })

<--! 其中一条点击按钮打印出的数据格式
batchno: "152552555"
count: "5"
name: "--"
num: "703317"
unit: "KG"
-->
`
这个页面全部的代码，别人的项目，我就要做个删除数据。但是不知道怎么处理
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<title>物料盘点</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../libs/mui/css/mui.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../static/css/app.css" />
<link rel="stylesheet" type="text/css" href="../static/css/iconfont.css" />
<script src="../libs/mui/js/mui.js"></script>
<script src="../libs/jquery/jquery-1.11.1.js"></script>
<script src="../libs/layer/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/layer/laytpl.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/app.js" type="text/javascript" charset="utf-8"></script>
<style>
    .console {
        margin-top: 0.625rem;
        width: 100%;
        position: relative;
        height: 4.6875rem;
    }

    .console-item {
        text-align: center;
        display: inline-block;
        height: 3.4375rem;
        margin-top: 0.625rem;
        width: 32%;
    }

    .console-item span {
        display: block;
        font-size: 0.75rem;
    }

    .console-item img {
        height: 1.875rem;
        width: 1.875rem;
    }

    .info {
        margin-top: 0.625rem;
    }

    .pd-count {
        margin-top: 0.625rem;
        height: 2.5rem;
        background-color: #00aaff;
        line-height: 2.5rem;
        padding: 0 0.625rem;
        font-style: italic;
        color: white;
        opacity: 0.6;
    }

    .winfo {
        position: relative;
        height: 21.25rem;
    }

    .pd-subtitle {
        font-size: 0.8125rem;
        color: #666666;
    }

    .pddsc textarea {
        font-size: 0.9375rem;
        color: #555555;
    }

    .pddsc textarea::-webkit-input-placeholder {
        font-style: italic;
        color: #777777;
        font-size: 0.75rem;
    }

    .scroll-footer {
        height: 8.75rem;
        text-align: center;
        line-height: 8.75rem;
        color: #eee;
        font-style: italic;
        font-size: 0.75rem;
    }

    .test-btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        z-index: 200;
        background-color: white;
    }

    .pdwindow {
        border-radius: 0.625rem;
        padding: 0.3125rem;
    }

    .pdw-num {
        font-size: 1.25rem;
        margin: 0.625rem auto;
        border-bottom: 0.0625rem solid #999999;
        width: 80%;
        padding-bottom: 0.3125rem;
    }

    .pdw-ptname {
        color: #AAAAAA;
    }

    .pdw-btn button:first-child {
        width: 9.375rem;
    }

    .mui-navigate-right input {
        border: solid 0.0625rem #AAAAAA;
        color: red;
        float: right;
        margin-right: 2rem;
    }

    .mui-table-view-cell {
        position: relative;
        top: 0%;
    }

    .mui-coll-li {
        position: relative;
    }

    .mui-coll-btn {
        position: absolute;
        z-index: 999;
        left: 70%;
        top: 1rem;
    }
</style>

</head>

<body>

<div class="mui-content">
    <div class="mui-wall-default console">
        <div class="console-item " id="start">
            <img src="../static/images/start.png">
            <span class="mui-tab-label" id="startPD" data-trans="html:inventory_start">开始盘点</span>
        </div>
        <div class="console-item ">

            <img src="../static/images/pd_runing.png" id="pdrotate" style="width:2.75rem;height: 2.5625rem;">

        </div>
        <div class="console-item" id="end">
            <img src="../static/images/complete.png">
            <span class="mui-tab-label" id="endPD" data-trans="html:inventory_end">结束盘点</span>
        </div>
    </div>
    <div class="mui-wall-default info">
        <div class="mui-list">
            <div class="mui-list-item">
                <span class="mui-tab-label" data-trans="html:inventory_user">盘点人</span>
                <span class="mui-pull-right" id='userName'>---</span>
            </div>
            <div class="mui-list-item">
                <span class="mui-tab-label" data-trans="html:inventory_date">盘点日期</span>
                <span class="mui-pull-right" id='pdate'>----/--/--</span>
            </div>
        </div>
    </div>
    <div class="pd-count mui-row" id="pd-count">
        <div class="mui-col-sm-6 mui-col-xs-6">
            <span data-trans="html:class">类别</span> :<span id="typeCount">0</span> </div>
        <div class="mui-col-sm-6 mui-col-xs-6 mui-text-right">
            <span data-trans="html:total">总数量</span>:<span id="totalCount">0</span></div>
    </div>
    <div class="mui-wall-default winfo">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view" id="pdList">

                    <!-- 盘点的物料列表 -->

                </ul>
                <div class="scroll-footer" style="height: 8.75rem;font-style: italic;">
                    <span>----<span data-trans="html:theend">已经到底了</span>----</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="test-btn">
    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">测试盘点</button>
</div>

<template id="tpl">
    <li class="mui-coll-li">
        <button type="button" class="mui-coll-btn mui-btn mui-btn-outlined">刪除</button>
        <div class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="javascript:;">
                <div>
                    <span data-trans="html:material_no">物料号</span>:{{d.num}}/
                    <span data-trans="html:count">数量</span>:{{d.count}}/{{d.unit}}
                </div>
                <div style="font-size: 0.9375rem; color: #CCCCCC;"><span
                        data-trans="html:batchno">批次号</span>:{{d.batchno}}</div>
            </a>
            <div class="mui-collapse-content">
                <div class="pd-title">
                    <span class="mui-label" style="font-size: 19px;"><span
                            data-trans="html:material_no">物料号</span>:{{d.num}}</span>
                </div>
                <div class="pd-subtitle">
                    <span class="mui-tab-label"><span data-trans="html:material_name">品名</span>:{{d.name}}</span>
                    <span class="mui-tab-label mui-pull-right"><span
                            data-trans="html:count">数量</span>:{{d.count}}/{{d.unit}}</span>
                </div>
                <div class="pddsc">
                    <textarea class="form" rows="1" disabled="disabled" placeholder="备注信息..."
                        data-trans="placeholder:mark_dowm">{{d.dsc}}</textarea>
                </div>
            </div>
        </div>
    </li>
</template>
<!-- 盘点输入模版 -->
<template id="pdtpl">
    <div class="pdw-content">
        <div class="pdw-num mui-text-center">
            <input id="pd_num" value="{{d.num}}"
                style="font-size: 1.25rem;width: 100%;height: 3.125rem;text-align: center;border: 0;"></div>
        <div class="pdw-ptname mui-text-center">
            <span>---------</span>
        </div>
        <div class="pdw-count">
            <div class="label-count" style="text-align: center;margin-top: 0.625rem;">
                <div style="width: 80%; margin: 0 auto; text-align: center;">
                    <input class="mui-input" style="text-align: center;" type="text" id="pd_count" value="">
                </div>
                <!-- <div class="mui-numbox" style="width: 80%;height: 3.125rem;" data-numbox-min="1" data-numbox-max="1000">
                        <button class="mui-btn mui-btn-numbox-minus" type="button"  style="font-size: 1.875rem;">-</button> 
                        
                         <button class="mui-btn mui-btn-numbox-plus" type="button" style="font-size: 1.875rem;">+</button>
                    </div> -->
            </div>
            <!-- <div class="mui-input-row mui-input-range range-slider" style="padding-right: 0;margin: 0.625rem auto; width: 90%;"
                 id="mySlider">
                    <input type="range" min="1" max="100" value="1">
                </div> -->
        </div>

        <div class="pddsc" style="margin: 15px auto; width: 80%;">
            <textarea class="form" id="pd_dsc" rows="2" placeholder="请输入备注信息..."
                data-trans="placeholder:mark_dowm"></textarea>
        </div>
        <div class="pdw-btn mui-text-center" style="margin-top:-1.25rem;">
            <button type="button" class="mui-btn mui-btn-blue" id="pdwSubmit"><span
                    data-trans="html:submit">确认</span></button>
            <button type="button" class="mui-btn mui-btn-default" id="pdwCancel"><span
                    data-trans="html:cancel">取消</span></button>
        </div>
    </div>
</template>

</body>
<script type="text/javascript">

var bt = null;
var inventoryList = [];
var typeCount = 0;
var totalCount = 0;
//var inventoryIsRuning=false;
var isInventoring = false;
var inventoryStorageKey = "inventorys";
var pd_winIndex = false; //盘点对话框
var Location = null;
app.ready(function () {
    //用户信息
    var user = app.getUserId();
    var userInfo = app.getUser();
    console.log(JSON.stringify(userInfo));
    Location = userInfo.ProductionLineList[0].Location;
    $("#userName").html(userInfo.RealName);
    //日期
    $("#pdate").html(new Date().format("yyyy/MM/dd"));
    va

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

数组删除

// index 删除元素的索引
array.splice(index, 1)

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.7k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...