如何通过点击此选择锚点按钮隐藏一个div

Question

---

我的主要问题是如何隐藏目前唯一的div我点击......请建议我我能为

---

做

---

$('.ads-close-btn').click(function() { 
 
    $('.full-width-add').hide("slow"); 
 
    }); 
 

 
alert('MY main question is how can i hide only current div');

.a_text { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/16f70ff438.js"></script> 
 
<!--First add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--second add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--third add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--4th add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div>

---

我的主要问题是如何隐藏目前唯一的div我点击......请建议我什么我可以为

---

Answer 1

做只是加入这一行

$(this).parents('.full-width-add:first').hide("slow"); 

，而不是

$('.full-width-add').hide("slow"); 

$('.ads-close-btn').click(function() { 
 
    $(this).parents('.full-width-add:first').hide("slow"); 
 
});

.a_text { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/16f70ff438.js"></script> 
 
<!--First add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--second add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--third add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--4th add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div>

Answer 2

添加this与parents功能

$('.ads-close-btn').click(function() { 
    $(this).parents('.full-width-add').hide("slow"); 
    }); 

https://jsfiddle.net/w8fv6os7/

Answer 3

当你写

$('.full-width-add') 

实际上选择的是与所有元素。全宽度添加类。

尝试通过更换你的函数：

$('.ads-close-btn').click(function() { 
$(this).parent().hide("slow"); 
}); 

这样，你只能选择关闭按钮的父。

Answer 4

尝试的this组合使用jQuery closest()

$('.ads-close-btn').click(function() { 
$(this).closest('.full-width-add').hide("slow"); 
}); 

Answer 5

以下是相同的片段。

$('.ads-close-btn').click(function() { 
 
    var curId=$(this).attr('id'); 
 
     $('#div'+curId).hide("slow"); 
 
    }); 
 

 
alert('MY main question is how can i hide only current div');

.a_text { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/16f70ff438.js"></script> 
 
<!--First add div--> 
 
<div class='full-width-add' id="div1"> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="1"><i class='fa fa-close' ></i></a> 
 
</div> 
 
<!--second add div--> 
 
<div class='full-width-add' id="div2"> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="2"><i class='fa fa-close' i></i></a> 
 
</div> 
 
<!--third add div--> 
 
<div class='full-width-add' id="div3"> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="3"><i class='fa fa-close' ></i></a> 
 
</div> 
 
<!--4th add div--> 
 
<div class='full-width-add' id="div4" > 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="4"><i class='fa fa-close' ></i></a> 
 
</div>