表单复制删除功能

kunyou7003 2016-09-24 12:17:20

需求是这样的，初始页面是这样的，填完内容，点击add more，在原来表单的下方将表单和add more都复制一遍并且新复制出来的增加一个delete的按钮。新出现的表单是空白的，delete按钮能删除新生成出来的表单。请问这个功能该怎么写？最好有例子有代码
<div class="firstframe">
<li></li><input></input>
<li></li><input></input>
<li></li><input></input>
<li></li><input></input>
</div>
<div class="addframe"> </div>
<li class="msg">
<span> </span>
<div class="wid350 myright">
<button type="button" onClick="addmore('firstframe')">Add More</button>
</div>
<script type="text/javascript">
function addmore(classname) {
//$('.'+classname).html($('.'+classname).html() + '<br>' + $('.'+classname).html());
$('.'+classname).next('.addframe').append('<br>' + $('.'+classname).html());
}
</script>用这样方法复制以后，input里面的内容都一起复制下来了，而且节点的事件却没有复制下来，请问如何修改？input内容不要复制，节点事件要复制

...全文

234 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

kunyou7003 2016-09-24

打赏
举报

引用 2 楼 zzgzzg00 的回复:



<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="test" style="display: none">

        <input type="text" /><input type="button"  value="delete" />

    </div>

    <div>

        <input type="text" /><input type="button"  value="delete" />

    </div>

    <input type="button" value="copy" />

    <script>

        var template=document.getElementById('test');

        document.body.onclick=function(e){

            e=e||window.event;

            var target= e.target || e.srcElement;

            if(target.tagName.toLowerCase()=='input'){

                if(target.value=='delete'){

                    var div=target.parentNode;

                    var p=div.parentNode;

                    p.removeChild(div);

                }

                if(target.value=='copy'){

                    var t=template.cloneNode(true);

                    t.removeAttribute('id');

                    t.style.display='';

                    document.body.insertBefore(t,target);

                }

            }

        }

    </script>

</div>

</body>

</html>

我动态添加了delete按钮，但是不知道为什么按钮的value显示不出来,css样式也不对，应该与add more样式一致的。点击delete并没有删除的效果

似梦飞花 2016-09-24

打赏
举报


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="test" style="display: none">
        <input type="text" /><input type="button"  value="delete" />
    </div>
    <div>
        <input type="text" /><input type="button"  value="delete" />
    </div>
    <input type="button" value="copy" />
    <script>
        var template=document.getElementById('test');
        document.body.onclick=function(e){
            e=e||window.event;
            var target= e.target || e.srcElement;
            if(target.tagName.toLowerCase()=='input'){
                if(target.value=='delete'){
                    var div=target.parentNode;
                    var p=div.parentNode;
                    p.removeChild(div);
                }
                if(target.value=='copy'){
                    var t=template.cloneNode(true);
                    t.removeAttribute('id');
                    t.style.display='';
                    document.body.insertBefore(t,target);
                }
            }
        }
    </script>
</div>
</body>
</html>

似梦飞花 2016-09-24