如何定位按钮项的父项以将其删除？

Question

我可以用

$(this).remove();

定位并删除“读取”按钮，但是我实际上要定位div中的所有元素。 我认为必须使用.parent来完成此操作，但是我似乎无法使其正常工作？

_.each(Badges, function(item) 
{
    var wrapper = $('<div></div>');
    wrapper.append('<img id="share_button" class="images responsive-image BadgeImgOutline" src="' + item.imageURL + '" />');

    wrapper.append('<div type="button" class="wrapper portfolio-item-thumb one-third btn_badges btn-danger_badges mrs read">' + 'Remove kudosoo' + '</div>' + '<br>' + '<div class="wrapper b_seperater"></div>' + '<br>');

    $('#container').append(wrapper);
    wrapper.children('.read').click(function() 
    {
        item.fetchedObject.set("B_Notify", "Read");
        $(this).remove();

        item.fetchedObject.save(null, 
        {
            success: function(results) 
            {
                console.log("Read");
            },

Answer 1

只是改变

$(this).remove();

至

$(this).parent().remove();

例：

 ['testing', 'one', 'two', 'three'].forEach(function(item) { var wrapper = $('<div></div>'); wrapper.append('<div type="button" class="wrapper portfolio-item-thumb one-third btn_badges btn-danger_badges mrs read">' + 'Remove ' + item + '</div>' + '<br>' + '<div class="wrapper b_seperater"></div>' + '<br>'); $('#container').append(wrapper); wrapper.children('.read').click(function() { $(this).parent().remove(); }); }); 

 #container > div { border: 1px solid black; padding-top: 2px; } .read { cursor: pointer; } 

 <div id="container"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

附注：我不会勾click的每一个项目这样。 相反，我只是使用植根于容器中的事件委托：

 // Handle clicks - handler is only fired if the click // passed through a `.read` element en route to the // container $("#container").on("click", ".read", function() { $(this).parent().remove(); }); // Add items ['testing', 'one', 'two', 'three'].forEach(function(item) { var wrapper = $('<div></div>'); wrapper.append('<div type="button" class="wrapper portfolio-item-thumb one-third btn_badges btn-danger_badges mrs read">' + 'Remove ' + item + '</div>' + '<br>' + '<div class="wrapper b_seperater"></div>' + '<br>'); $('#container').append(wrapper); }); 

 #container > div { border: 1px solid black; padding-top: 2px; } .read { cursor: pointer; } 

 <div id="container"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>