删除父元素

Question

有人可以帮我解决这个问题。 我想循环通过课程＆＃39; row＆＃39;并删除整个班级＆＃39; card-col＆＃39;包含id = x2或x3。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预期结果是这样的。 我可以用什么jquery？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

感谢

Answer 1

快速通过jQuery文档：

Selectors如何使用正确的选择器获取元素
.closest()测试找到最接近的匹配元素的DOM树 .remove()是的。

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

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

<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 class="card-col">
 		<div class="card">
			 <div class="card" id="x4">x4</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;