mui实现左滑删除功能 htmL、js代码及踩坑

         因为之前排版为了方便都是用table，tr，td来做的（后台小Java开发，谅解谅解）

         这玩意只能用ul、li 最方便

贴代码

html = "<ul id='ul" + result + "' class='mui-table-view'>

                <li class='mui-table-view-cell' id="+result+">"
                        + "<div class='mui-slider-right mui-disabled'>

                                 <a id='serialize" + serializeId + "' class='mui-btn mui-btn-red'>

                                          <i name='scanData' id='i" + serializeId + "' style='' class='edit'>删除</i>

                                 </a>

                            </div>"
                        + "<div style='float: right;width: 50%;' class='mui-slider-handle'>"+result + "</div>

                            <div  style='float: ;width: 50%'>箱标签</div>

                </li>

             </ul>";

因为是拼接的html，为了方便你们（和以后的自己看），就随便调整了下格式，不用纠结id\name属性

获取<i>标签

                            var del = document.querySelector("#i"+serializeId);                
                            del.onclick = delect;

                             //下面这玩意是颜色渐变css(0-1)，可以用着玩玩
                            document.getElementById("i" + sid + "").style.opacity=0.2;

 

function delect(e){

              mui.confirm('确认删除该数据？', '删除', ['确认','取消'], function(a) {
                    if (a.index == 0) {

                                  //简单写一下

                               //获取节点信息

                              var parent = e.target.parentNode.parentNode.parentNode.parentNode.parentNode;

                              //干掉<ul>标签的节点，然后就没了。。。
                             parent.removeChild(e.target.parentNode.parentNode.parentNode.parentNode);

 

                    }

             });

}

 

ps:右滑删除就是把class="mui-slider-right"的right改成left呗，左右都支持，就把删除的那个div左右两个都加上呗，class一个左一个右。