如何通過點擊此選擇錨點按鈕隱藏一個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>