如何定位按钮项的父项删除它？

Question

我可以用

  

$(this).remove();

定位并删除＆＃39;读取＆＃39;按钮，但我想实际定位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();

示例：

＆＃13;

＆＃13;

['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();
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

旁注：我不会在每个项目上挂钩click。相反，我只是使用以容器为根的事件委托：

＆＃13;

＆＃13;

// 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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;