关闭盛大的父div jquery

Question

如何使用jquery点击“X”（从FA关闭glyphicon）时隐藏div。

我已经有一个函数来打开一个div的子节点。我怎么能再次关闭它？ 我怎样才能到达我的div的“祖父母”？我已经尝试过parentUntil（）和closing（）函数。 你能救我一下吗？

提前谢谢！ ;）

$(document).ready(function(){
	
	$(".film").click(function (){
		$(this).children(".tag-cloud").fadeIn();
	});
	
	$(".fa-close").click(function () {
		$(this).parentsUntil("div").hide();
	});
	
});

.tag-cloud {
	display: none;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="film">
	<div class="row entry">
		<div class="col-md-2">
		
		<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="thumbnail">
		
		<span class="ckbox">
			<input type="checkbox" id="checkbox1">
			<label for="checkbox1"></label>
		</span></div>
		
		<div class="col-md-8">
		<h4 class="film-title">Film Title</h4>
		</div>
		
		<div class="col-md-2">
		<div class="rating pull-right">
		<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-full"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>
		</div></div>
	
	</div> <!-- Row Ends -->
		<div class="tag-cloud">
			<ul>
			<li><a href="">tag1</a></li>
			<li><a href="">tag2</a></li>
			</ul>
		
		<div class="exit-tags">
			<i class="fa fa-2x fa-close">x</i>
		</div>
		</div><!-- tag-cloud -->
		
		</div><!-- film -->