如何使用 javascript jquery 关闭父 div答案

【问题标题】：how to close parent div with javascript jquery如何使用 javascript jquery 关闭父 div
【发布时间】：2019-01-10 19:15:41
【问题描述】：

我有这段代码，当点击关闭图标时，关闭图标所在的 div echomessage 应该会消失，但所有具有 echomessage 类的 div 现在都会消失。
所以它应该只关闭关闭按钮所在的div

<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn"><i class="fas fa-times echoclose"></i></span>  
   <?php echo 'Upload successful: <b>'.$_FILES["file"]["name"].'</b>'; ?>
</div>

$('.closebtn').click(function(){
        $(".echomessage").fadeOut(300);
    });

【问题讨论】：

代码完全按照您的要求执行。您写道，每个具有“echomessage”类的元素都应该“淡出”。你能改写一下这个问题吗？

标签： javascript jquery

【解决方案1】：

在关闭按钮的父元素中找到带有echomessage 的div。

$(this).parent('.echomessage').fadeOut(300)

【讨论】：

@JackMaessen 如果它帮助您解决了问题，请将此标记为正确答案。干杯。

【解决方案2】：

使用.echomessage 类访问父类，通过$(this) 检索当前类：

$('.closebtn').click(function(){
  $(this).parent(".echomessage").fadeOut(300);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn">X</span>  
</div>
<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn">X</span>  
</div>
<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn">X</span>  
</div>

【讨论】：

【解决方案3】：

如果您对纯 JavaScript 方法感兴趣，可以使用querySelectorAll() 方法检索所有closebtn 元素，然后使用forEach() 方法检索并添加每个closebtn 元素的click 侦听器，最后是parentElement 属性，用于删除或隐藏子closebtn 元素的父元素。

您可以查看下面的代码片段，了解我上面描述的实际示例：

/* JavaScript */

document.querySelectorAll(".closebtn").forEach(btn => {
	btn.addEventListener("click", function(){this.parentElement.style.display ="none"})
})

<!-- HTML -->

<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn">X</span>  
   <p>PHP CODE HERE</p>
</div>
<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn">X</span>  
   <p>PHP CODE HERE</p>
</div>
<div class="alert alert-success echomessage" role="alert">
   <span class="closebtn">X</span>  
   <p>PHP CODE HERE</p>
</div>

【讨论】：