[英]Remove parent div if child div contains a certain data attribute
Since, I'm doing this dynamically, I have to check whether the main div matches a certain user-id
. 由于我是动态进行的,因此我必须检查main div是否与某个
user-id
匹配。 If it does, then dive into it and do the extra work. 如果是这样,请深入其中并做额外的工作。 Let me show you what i'm talking about.
让我告诉你我在说什么。
<div class="col-md-6 user-card-holder" data-user="2">
<div class="col-xs-2 single-card">
<div class="house" data-house="hearts" data-value="q">Q-hearts</div>
</div>
</div>
There are many div's
having the classname user-card-holder
. 有许多
div's
具有类名user-card-holder
。 I have to check the specific one with the data-user
attribute. 我必须使用
data-user
属性检查特定的对象。 Now what I'm checking is: 现在我正在检查的是:
If a div contains data-house
with the value of hearts
and also data-value
with the value of q
, then remove that div along with it's parent. 如果div包含具有
hearts
值的data-house
以及具有q
值的data-value
,则将该div及其父级移除。 Here parent means the div
having the class single-card
and not the user-card-holder
这里的parent是指具有
single-card
类而不是user-card-holder
的div
I have tried using filter()
. 我尝试使用
filter()
。 Maybe I'm doing something wrong here. 也许我在这里做错了。
$('.user-card-holder[data-user='+ card.user +'] div div').filter(function(){
var div = $(this).data('house') == card.house && $(this).data('value') == card.number;
return div.parent()
}).remove();
I have seen answers which shows to remove the element based on data attribute, but not it's parent. 我已经看到了答案,该答案显示了根据data属性删除元素,但不是父元素。
I'd suggest: 我建议:
// this finds all <div> elements with a
// 'data-house' attribute equal to 'hearts' and a
// 'data-value' attribute equal to 'q':
$('div[data-house=hearts][data-value=q]')
// traverses to the parent of the matching element(s):
.parent()
// removes the parent element(s) from the DOM:
.remove();
Alternatively, if you're searching an ancestor dynamically to find the appropriate element(s) to remove, which seems to be the case on a re-reading of your question: 另外,如果您正在动态搜索祖先以找到要删除的适当元素,那么在重新阅读您的问题时似乎就是这种情况:
// finds <div> element(s) with the class of 'user-card-holder'
// and the 'data-user' attribute equal to the value of the 'card.user'
// variable, and finds the descendant <div> element(s) matching
// the selector used above:
$('div.user-card-holder[data-user=' + card.user + '] div[data-house=hearts][data-value=q]')
// traverses to the parent of the descendant element:
.parent()
// removes the parent element of that descendant:
.remove();
References: 参考文献:
Try this function: 试试这个功能:
removeCardFromUser(2);
function removeCardFromUser(id) {
$('.user-card-holder').filter(function(){
var user = $(this).data('user');
if (user === id) {
$(this).find('div').filter(function(){
var house = $(this).data('house');
var value = $(this).data('value');
if (house === 'hearts' && value === 'q') {
$(this).parent().remove();
}
});
}
});
}
It looks for a div with class 'user-card-holder' and data-user = {given id} and then looks for its descendants with data-house = 'hearts' and data-value='q' and deletes its parent. 它使用类'user-card-holder'和data-user = {given id}查找div,然后使用data-house ='hearts'和data-value ='q'查找其后代并删除其父级。
David's answer would suffice though! 大卫的答案就足够了! :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.