Удалить родительский элемент

Question

может кто-то помочь мне решить эту проблему. Я хочу пройти через класс 'row' и удалить весь класс 'card-col', который содержит id = x2 или x3.

<div class="row"> 
 
\t <div class="card-col"> 
 
    \t \t <div class="card"> 
 
    \t \t \t <div class="card" id="x1"></div> 
 
    \t \t </div> 
 
    \t </div> 
 
    \t <div class="card-col"> 
 
\t \t <div class="card"> 
 
\t \t \t <div class="card" id="x2"></div> 
 
    \t \t </div> 
 
    \t </div> 
 
    \t <div class="card-col"> 
 
    \t \t <div class="card"> 
 
\t \t \t <div class="card" id="x3"></div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

ожидаемый результат что-то вроде этого. какой jquery я могу использовать?

<div class="row"> 
 
\t <div class="card-col"> 
 
    \t \t <div class="card"> 
 
    \t \t \t <div class="card" id="x1"></div> 
 
    \t \t </div> 
 
    \t </div> 
 
\t <div class="card-col"> 
 
\t \t <div class="card"> 
 
    \t \t \t <div class="card" id="x4"></div></div> 
 
\t </div> 
 
</div>

благодарит

Answer 1

Go быстро корыт документов JQuery:

Selectors как получить элемент, используя правильные селекторы
.closest() теста вверх DOM дерева найти ближайшую соответствующий элемент
.remove() ye п.

jQuery(function($) { // DOM is now ready 
 

 
    $("#x2, #x3").closest(".card-col").remove(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="card-col"> 
 
    <div class="card"> 
 
     <div class="card" id="x1">x1</div> 
 
    </div> 
 
    </div> 
 
    <div class="card-col"> 
 
    <div class="card"> 
 
     <div class="card" id="x2">x2</div> 
 
    </div> 
 
    </div> 
 
    <div class="card-col"> 
 
    <div class="card"> 
 
     <div class="card" id="x3">x3</div> 
 
    </div> 
 
    </div> 
 
</div>

---

Другой путь, вы можете ориентировать все первые .card-col и использование :not(:has(#x1)) для фильтрации и чем удалить

https://api.jquery.com/not-selector/
https://api.jquery.com/has-selector/

jQuery(function($) { // DOM is now ready 
 
    
 
    $(".card-col:not(:has(#x1))").remove(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="card-col"> 
 
    <div class="card"> 
 
     <div class="card" id="x1">x1</div> 
 
    </div> 
 
    </div> 
 
    <div class="card-col"> 
 
    <div class="card"> 
 
     <div class="card" id="x2">x2</div> 
 
    </div> 
 
    </div> 
 
    <div class="card-col"> 
 
    <div class="card"> 
 
     <div class="card" id="x3">x3</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать parents():

$("#x2, #x3").parents(".card-col").remove(); 

Надеется, что это помогает.

$("#x2, #x3").parents(".card-col").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
\t <div class="card-col"> 
 
    \t \t <div class="card"> 
 
    \t \t \t <div class="card" id="x1">x1</div> 
 
    \t \t </div> 
 
    \t </div> 
 
    \t <div class="card-col"> 
 
\t \t <div class="card"> 
 
\t \t \t <div class="card" id="x2">x2</div> 
 
    \t \t </div> 
 
    \t </div> 
 
    \t <div class="card-col"> 
 
    \t \t <div class="card"> 
 
\t \t \t <div class="card" id="x3">x3</div> 
 
\t \t </div> 
 
\t </div> 
 
    \t <div class="card-col"> 
 
    \t \t <div class="card"> 
 
\t \t \t <div class="card" id="x4">x4</div> 
 
\t \t </div> 
 
\t </div> 
 
</div>