Удалить родительский div, если дочерний div содержит определенный атрибут данных

Question

Так как я делаю это динамически, я должен проверить, соответствует ли главный div определенному user-id. Если это так, то погрузитесь в него и выполните дополнительную работу. Позвольте мне показать вам, о чем я говорю.

<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> 

Есть много div's, имеющих название класса user-card-holder. Я должен проверить конкретный атрибут data-user. Теперь то, что я проверяю это:

Если ДИВ содержит data-house со значением hearts а также data-value со значением q, а затем удалить, что Див вместе с его родителем. Здесь parent означает div, имеющий класс single-card, а не user-card-holder

Я попытался использовать filter(). Может быть, я делаю что-то не так.

$('.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(); 

Я видел ответы, которые показывают, чтобы удалить элемент на основе атрибута data, но не его родителя.

Answer 1

Я хотел бы предложить:

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

В качестве альтернативы, если вы ищете предка динамически найти подходящий элемент (ы) для удаления, который, кажется, дело на повторное чтение вашего вопрос:

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

Ссылки:

• CSS:
  • Attribute-selectors.
• JQuery:
  • parent().
  • remove().

Answer 2

Попробуйте эту функцию:

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

Он ищет DIV с классом «пользовательского владельца карточки» и данных пользователем = {данный идентификатор}, а затем ищет его потомков с data-house = 'hearts' и data-value = 'q' и удаляет его родителя.

Ответ Дэвида был бы достаточно! :)