使用 jquery & 删除 html，如果 class 存在于其中的任何元素中，则删除容器

Question

我正在处理一份人员名单。 "Friends" 和 "Not Friends"

每个容器代表一个人。如果这个人是我的朋友，如果这个人不是朋友，它会有一个按钮显示"remove friend" ;它会有一个按钮，上面写着 "add friend"

每个人容器都包含 "Remove Friend" 和 "Add Friend" 按钮。如果此人是朋友，则 "remove friend" 按钮将添加 class of "hidden-element"，如果此人不是我的朋友“添加朋友”按钮将具有与"hidden-element"[=17 相同的class =]

目标：只显示不是我朋友的人。

尝试：

对于 .hidden-element class 我想完全删除 html。（不仅仅是隐藏它的显示）。为了实现这一点，我使用了 $('.hidden-element').remove();，我认为它从 html?

中删除了带有“.hidden-element”的 class 的所有按钮

识别哪些人是朋友，哪些人不是朋友。我用“.hidden-element”的class删除了所有元素，只留下“.person”中的可见按钮容器。为了实现这一点，我使用了 $('.hidden-element').remove();，我认为它从 html.

中删除了带有“.hidden-element”的 class 的所有按钮

现在我想删除所有带有“.person”的 class 的元素 只有当 它们包含 anywhere 时他们，一个带有“.remove-friend”

class 的元素

所以我尝试了这个：

if($('.person').find('.remove-friend').length) {
            $( '.person' ).remove();
}

刚刚删除了所有带有“.person”的 class 的元素，这不是我想要的。因为我只希望不是朋友的人出现在前端

HERE IS A FULL JS FIDDLE

将 Jquery 中的 .remove 更改为 .show 以查看 html 布局以便更好地理解。

Answer 1

尝试将您的代码替换为

$('.person').each(function(index, element) {
    if($(element).find('.remove-friend').length) {
        $(element).remove(); 
    }
});

Answer 2

就这样吧：

$('.remove-friend').parents('.person').remove()

这里有一个 fiddle https://jsfiddle.net/nwop13L9/40/

但正如@CalvinNunes 所说 -> 只是做 $('.friend').remove();

更简单

使用 jquery & 删除 html，如果 class 存在于其中的任何元素中，则删除容器

Removing html with jquery & and removing container if class exists in any element inside

javascript

jquery

code-injection

HERE IS A FULL JS FIDDLE