弹出层删除父页面的节点对象,删除不了怎么办?

提问 未结
23 247
kyrie
kyrie 2018-6-7
悬赏:20飞吻
版本:layui 浏览器:谷歌

回帖
  • 你这个是追加了dom 在追加的时候添加上id
    或者其他唯一性的,取消的时候对应把结构删了
    0 回复
  • kyrie
    2018-6-7
    @SMALL
    id就是唯一啊 你说的删结构可以代码演示一下吗?
    0 回复
  • 这一句应该写错了,修改id的这一块应该是放在里面的elem的
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷
    原先的elem没有id这一属性,我是为了之后删除删除指定节点时用来定位的,
    我担心不能把这个elem对象直接追加到父节点,因为之后操作弹出层复选框时,也会影响到你追加的elem对象,
    我就用拼接,还是删除不了
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷 为什么???[抓狂]
    0 回复
  • @kyrie 纯js的这些看着真心有点别扭哈,建议还是换成jquery来操作比较好我觉得,当然不是说不能用jquerydom操作哈。我是觉得你这个id可能会跟其他的重复了吧,我觉得用jquery来操作会方便很多,比如你弹出框中点击checkbox,然后你在另外需要修改的dom中找到跟这个checkbox相同值的checkbox,当然如果一开始没有就是追加一个进去,如果是取消掉,那么也就是将这个相同值的checkbox给remove掉。我建议
    0 回复
  • 直接审查元素看渲染成什么样子,把整个div直接销毁
    0 回复
  • kyrie
    2018-6-7
    应该不是id重复的原因,我试试jquery
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷 应该不是id重复的原因,我试试jquery
    0 回复
  • kyrie
    2018-6-7
    @SMALL 太暴力 我是div嵌套input,不是整个删除div
    0 回复
  • @kyrie 囧,亲,当然是要找到你想删除的特定的input呀,不是整个div,你理解错了吧。我试着给你写个代码你试一下看看有没有问题。
    updateCheckbox: function(elem){
    var standardElem = $('#standardAsso');
    if(elem.checked) {
    standardElem.append('<input type="checkbox" name="myName" title="‘+elem.title+’" value="'+elem.value+'" lay-skin="primary" checked>');
    } else {
    standardElem.find('input[type="checkbox"][name="myName"][value="'+elem.value+'"]').remove();
    }
    layui.form.render('checkbox');
    }
    手敲的不知道对不对
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷 我刚才回答的是另一位SMALL亲的,你看错了!哈哈![哈哈] 我试试你的
    0 回复
  • @kyrie 好吧,年纪大,眼花啦[哈哈]
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷
    还是不行。我把我的思路给你说一下,你看看哪里出错了
    首先点击按钮弹出弹出层,同时ajax请求动态加载复选框
    $.get(baseURL + "shop/wlstandard/listAll",function(r){
    var container = $("#container");
    $.each(r,function(index,item){
    container.append('<input type="checkbox" title="' + item.name + '" value="' + item.standardId + '" lay-skin="primary" lay-filter="standard">');
    });
    选中复选框的同时,有监听复选框事件在父页面动态加载复选框
    layui.form.on('checkbox(standard)',function(data){
    vm.updateCheckbox(data.elem);
    });
    updateCheckbox: function(elem) {
    var standardElem = $("#standardAsso");
    if (elem.checked) {
    standardElem.append('<input type="checkbox" title="'+elem.title+'" value="'+elem.value+'" lay-skin="primary" checked>');
    } else {
    standardElem.find('input[type="checkbox"][value="'+elem.value+'"]').remove();
    }
    layui.form.render('checkbox');
    },
    但现在的问题时取消选中的时候删除不了父页面的复选框[困]
    0 回复
  • 嗯嗯,其实主问题就是子页面勾选之后调用父页面的方法来更新父页面的dom常规来说是没啥问题的,关键是有没有报错,还有目前就只能加debugger来一步步调试,看看是哪个环节出问题了。一步一步走,看下里面的值还有执行之后是不是达到预期的效果,就知道是哪里出问题了额
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷
    简单的html页面也删除不了
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>复选框</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    </head>
    <body>
    <form class="layui-form" action="">

    <div class="layui-form-item" pane="">
    <label class="layui-form-label">原始复选框</label>
    <div class="layui-input-block">
    <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="" lay-filter="like">
    <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读" lay-filter="like">
    <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="" lay-filter="like">
    </div>
    </div>

    </form>

    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
    layui.use(['form','jquery'], function(form,$){
    form.render('checkbox');

    form.on('checkbox(like)',function(data){
    console.log(data);
    $(".layui-input-block").find('input[type="checkbox"][name="like1[game]"]').remove();
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • 这样子是获取不到的,如果里面出现[]应该要转义一下,写成
    $(".layui-input-block").find('input[type="checkbox"][name="like1\[game\]"]').remove();
    0 回复
  • kyrie
    2018-6-7
    @岁月小偷 一样删除不掉[失望] 绝望了
    0 回复
  • 有什么神奇[偷笑] 应该可以才对呀,我把代码弄下来试试看,
    0 回复
  • 找到原因了,当然根本上的原因还没去找,不过可以确定的是form.render不会对我们删除的checkbox对应的给我们渲染出来的东东给删掉,比如一开始有3个,删除一个只会render还是看到3个,但是其实里面原来的dom就只有2个了。估计得让他们好好整改一下这个form.render函数了,目前的应急处理是
            form.on('checkbox(like)',function(data){
    console.log(data);
    var elem = $(".layui-input-block").find('input[type="checkbox"][name="like1\[read\]"]');
    // 需要手动删除form给我们生成的组件(坑爹)
    elem.next().remove();
    // 实际需要删除的dom
    elem.remove();
    form.render('checkbox');
    });
    0 回复
  • kyrie
    2018-6-9
    @岁月小偷 http://fly.layui.com/jie/28404/
    能否帮看下这个帖子。已经困扰我好久了!
    0 回复
  • 网警
    2018-6-12
    您好,你的言论已被记录,请3日之内携带本人身份证来就近派出所处理,谢谢合作
    0 回复
  • kyrie
    2018-6-13
    @网警 什么鬼???
    0 回复