Question

我有一个函数可以在click事件中将元素附加到正文。然后还有另一个应该在单击之前附加的元素之一时删除这些元素。

当我点击.closeBigPic时，该元素被按预期删除，但.bigPicWrapper div被删除，而.bigPic元素仍然落后。

$(document).on('click', '.user-profile .avatar_section', function() {
    var thumbUrl = $(this).find('.avatar_profile').attr('src');

    var origUrl = thumbUrl.replace('thumb', 'medium');
    console.log(origUrl);

    $('body').append('<div class="closeBigPic"></div><div class="bigPicWrapper"><img class="bigPic" src="' + origUrl + '" /></div>')
});


$(document).on('click', '.closeBigPic', function() {
    $(this, '.bigPicWrapper').remove();
});

不确定为什么它是必要的，但这是scss以防万一：

    .user-profile {
    .avatar_section {
        cursor: pointer;
    }
}

.bigPicWrapper {
    position: absolute;
    z-index: 9010;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    img {
        max-width: 100%;
        border-radius: 100%;
        border: solid 5px #fff;
    }
}

不应该.remove()删除子元素。

更新：

当我将第二次点击事件更改为：

时

$(document).on('click', '.closeBigPic', function() {
    $(this).remove();
    $('.bigPicWrapper').remove();
});

它完全按预期工作。那里发生了什么？我想它与this

相关联

Answer 1

$(document).on('click', '.closeBigPic', function() {
  $(this, '.bigPicWrapper').remove();
});

这就是说使用.bigPicWrapper作为您的上下文。有点像

$('.foo, .bar').remove();

只是充当css选择器。

Answer 2

我认为以下内容并不符合您的想法：

$(this, '.bigPicWrapper')

来自documentation：

jQuery( selector [, context ] )

看起来'.bigPicWrapper'不是有效的背景。

jQuery，删除并不删除子元素 - 只是父

2 个答案: