Question

我有这段代码，当单击关闭图标时，关闭图标应该消失的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);
    });

Answer 1

在关闭按钮的父元素中使用echomessage查找div。

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

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

Answer 3

如果您对纯JavaScript方法感兴趣，则可以使用querySelectorAll()方法来检索所有closebtn元素，然后进行{{3} }方法来检索click侦听器并将其添加到每个closebtn元素，最后是forEach()属性以删除或隐藏子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>

如何使用javascript jquery关闭父div

3 个答案: