jQuery，刪除不刪除子元素 - 只是父母

我有一個函數，在單擊事件中將元素附加到正文。然後有另一個應該刪除這些元素，當之前追加的元素之一被點擊。jQuery，刪除不刪除子元素 - 只是父母

當我單擊.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()刪除子元素。

UPDATE：

當我更改第二個click事件：

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

它的工作原理完全符合市場預期。那裏發生了什麼？我想它是與被加上this

來源

2017-03-22 user3006927

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

這話說使用.bigPicWrapper爲您的上下文。有點像

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

只是作爲一個CSS選擇器。

來源

2017-03-22 02:15:51

是的，你是絕對正確的！我甚至沒有注意到我在做什麼。這很有趣。謝謝！ – user3006927

我不認爲下面做什麼你認爲它的作用：

$(this, '.bigPicWrapper')

從documentation：

jQuery(selector [, context ])

它看起來並不像'.bigPicWrapper'是一個有效的上下文。

來源

2017-03-22 02:17:40

jQuery，刪除不刪除子元素 - 只是父母

回答

相關問題