Как скрыть 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') 

вы фактически выбирающий все элементы с .Full ширины добавьте класс.

Попробуйте заменить вашу функцию:

$('.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>