Question

我试图在点击子div时使用jQuery删除div及其所有内容。为了解释这一点，这是一个有效的FIDDLE。基本上我需要在单击关闭按钮时删除pDiv。所以我尝试了这个：

$('div').on('click', '.closeDiv', function () {
    $(this).prev().remove();
    $(this).remove();
     $(this).parent().remove();
    $('#upload-file').val("");
});

但是，这似乎无法删除pDiv。

请测试上面的FIDDLE购买添加图片，然后点击绿色关闭按钮，然后尝试添加其他图片，您会看到之前的pDiv已被删除。

有人可以就此问题提出建议吗？

提前致谢

Answer 1

问题是因为在尝试对不再存在的元素进行进一步的DOM遍历之前调用$(this).remove()。删除该行。请注意，您也可以使用closest()查找所需的.pDiv元素，然后将其删除，如下所示：

$('#thumbnail').on('click', '.closeDiv', function() {
    $(this).closest('.pDiv').remove();
});

另请注意，小提琴中的代码使用了jQuery和原生JS的奇怪组合。你应该坚持一个或另一个。您还需要执行几个不需要的过程，例如创建canvas元素。试试这个：

jQuery(function($) {
    var $thumbnail = $('#thumbnail').on('click', '.closeDiv', function() {
        $(this).closest('.pDiv').remove();
        $('#upload-file').val('');
    });

    var $fileDiv = $("#upload");
    var $fileInput = $("#upload-file").on('change', function(e) {
        var filesVAR = this.files;
        showThumbnail(filesVAR);
    });

    function showThumbnail(files) {
        var file = files[0]
        var $pDiv = $('<div class="pDiv" />').appendTo($thumbnail);
        var $image = $('<img class="imgKLIK5" />').appendTo($pDiv);
        var $div = $('<div class="closeDiv">X</div>').appendTo($pDiv);

        var reader = new FileReader()
        reader.onload = (function(aImg) {
            return function(e) {
                aImg.src = e.target.result;
            };
        }($image[0]))
        var ret = reader.readAsDataURL(file);
    }
});

Updated fiddle

Answer 2

尝试关注并按照我提到的评论。

$(document).on('click', '.closeDiv', function () {
        $(this).prev().remove(); // i don't know why you need this.. let us know your structure
        //$(this).remove(); you don't need this line
         $(this).parent().remove();
        $('#upload-file').val("");
    });

请找到 working Fiddle for this

删除父母及其中的所有内容？

2 个答案: