Question

在我用于在元素页面上创建的HTML下面。

<div class="Att-Table">
                        <div class="FileRow">
                             <div class="Cell">
                                <span><input id="browse" type="file"/></span>
                            </div>
                            <div class="Cell">
                                <span><input placeholder="Description" id="desc" type="text"/></span>
                            </div>
                            <div class="Cell">
                                <span><a id="img1" href="#"><img class="delete" src="img/delete.png" /></a></span>
                            </div>
                        </div>
<div>

我的要求是每次点击“添加另一个”按钮时克隆下面的div。

<span>Add Another<a href="#" id="FileAdd"><img src="img/add.png" class="add" /></a></span>

点击按钮后，我会调用克隆js，如下所示

$("#FileAdd").click(function() {
    var newElement = $(document.createElement('div')).attr({
        class: "FileRow"
    });
    newElement.html('<div class="Cell">\
                        <span><input id="browse" type="file"/></span>\
                    </div>\
                    <div class="Cell">\
                        <span><input placeholder="Description" id="desc" type="text"/></span>\
                    </div>\
                    <div class="Cell">\
                        <span><a id="img1" onclick="FileAdd" href="#"><img class="delete" src="img/delete.png" /></a></span>\
                    </div>');
    newElement.appendTo(".Att-Table");
});

我有一个带有“FileRow”类的div来对这些新创建的元素进行分组。现在我的要求是从该克隆组中删除一个特定的div。我是Jquery的新手，如果有人可以帮我解决这个问题会很有帮助。

Answer 1

这有效。

<script type="text/javascript">
window.jQuery(document).ready(function(){
    window.jQuery('.delete').on('click',function(){
        window.jQuery(this).closest('.FileRow').remove();
    });
});
</script>

Answer 2

您需要使用事件委派将事件绑定到动态添加的DOM：

 $('body').on('click','.delete',function(){
    $(this).closest('.FileRow').remove();
 });

Answer 3

首先，您可以将document.createElement('div')替换为"<div/>"，这将产生完全相同的内容。

其次，它很安静。因为您知道dom结构，所以您只需将单击处理程序绑定到删除按钮，并要求从dom中删除所单击元素的父级的父级。

对于你的fileAdd函数，我们给出了类似的内容，因为名为delete的{{1}}操作有点奇怪，所以可能会重命名：

add

使用jquery从同一个类组中删除特定div

3 个答案:

这有效。