删除div jQuery

Question

所以我有这个：

<script>
    {% block js %}
    $('#add_file').on('click', function(){
    html = '<div class="row">';
        html += '<div class="col s6 input-field">';
                html += '<input placeholder="Komentaras" name="file_description" type="text" />';
        html += '</div>';
        html += '<div class="col s2 top_20">';
                html += '<a class="btn-floating red tooltipped delete"  data-position="top" data-delay="20" data-tooltip="Trinti"><i class="material-icons" id="delete_files">delete</i></a>';
        html += '</div>';
    html += '</div>';

    $('#files').append(html);
});

    {% endblock %}
</script>

此代码块根据单击次数生成并添加额外的div，问题是，如何通过按生成的红色btn来逐个删除每个生成的html？

Answer 1

$('a.delete').click(function() {
    $(this).closest('.row').remove();
})

注意：请勿在图标上使用相同的ID id="delete_files"

Answer 2

因为它是动态添加的，所以不能仅仅使用普通的jQuery来定位它。 jQuery与已加载的DOM一起使用-之后没有任何内容。

因此，您将编写一个执行以下操作的函数：

$('#files').on('click', '.delete', function()
{
    $(this).parents().eq(1).remove()   
})

参考：

https://api.jquery.com/parents/

https://api.jquery.com/eq/

https://api.jquery.com/remove/