fadeout jquery in specific div

Question

I want to fadeOut a specific div that was selected using class.

So my HTML looks like this

<div class="container" id="conversations">
 <button class="delete" id="1"></button>
</div>

<div class="container" id="conversations">
 <button class="delete" id="2"></button>
</div>

<div class="container" id="conversations">
 <button class="delete" id="3"></button>
</div>

So heres the case, if I selected delete button with ID that is equals to 3, how will I fadeout its current div element?

This is my jQuery as of now (not working)

$(document).on('click', '.delete', function(e){
        e.preventDefault();
          $(this).fadeOut();
    });

These are the functions that I tried

$('div.container').fadeOut(1000); // working but remove all divs
                $(this).fadeOut(); // not working
                jQuery(this).parent('div.container').fadeOut(1000); // not working
                $(this).parent("div.container").fadeOut(); // not working
                $(this).parent($('div.container')).fadeOut(); // not working

Update:

Solves this issue by re-initializing again its element

var _this = $(this);

I call the $(this).fadeOut() in the success callback of ajax where by callings $(this), you are pointing to the success function.

So by doing this inside the success callback func it is now working:

_this.parent('div.container').fadeOut();

your code is working fine you fade out the current selected button if you want to select parent element than try "$(this).parent("div.container").fadeOut();" — Swift, Jan 24 '20 at 07:50
still not working :( tried all that stuff before going in stack. I am using jquery 3.4 maybe its the cause or what? — freetzyy, Jan 24 '20 at 07:52
Yes , please try because sometime $ is not working and we can use jQuery instead of $ — Swift, Jan 24 '20 at 08:00
I also checked that. There's no error at all. I tried to use the id and of course it will only fadeOut the first div element. — freetzyy, Jan 24 '20 at 08:12
The code you provided works fine. The issue is here "*I call the $(this).fadeOut() in the success callback of ajax*" - which **was not mentioned originally** - the simple answer is that `this` depends on the context and it will be different inside the success callback. In future, please ensure you include *all* the relevant information. — freedomn-m, Jan 24 '20 at 09:40
You might find this useful: https://stackoverflow.com/questions/111102/how-do-javascript-closures-work — freedomn-m, Jan 24 '20 at 09:40

score 0 · Answer 1 · answered Jan 24 '20 at 07:42

0

The above code should work, it is working for me. Add some content to the button in order to see the difference.

[https://jsfiddle.net/uxmfnsb7/1/][1]

answered Jan 24 '20 at 07:42

R P

159
1
8

1

Did you see that message that said link only answers are not allowed? Do you think they added that for fun? Did you feel superior finding a way to "get around" that restriction? Add your code to your answer, or, in this case, just add an comment with the updated fiddle with "it works for me". – freedomn-m Jan 24 '20 at 09:37

score 0 · Answer 2 · edited Jan 24 '20 at 08:58

Your code is working fine

$(document).on('click', '.delete', function(e){
   e.preventDefault();
   $(this).fadeOut();
});

<div class="container" id="conversations">
 <button class="delete" id="1">Button 1</button>
</div>

<div class="container" id="conversations">
 <button class="delete" id="2"> Button 2</button>
</div>

<div class="container" id="conversations">
 <button class="delete" id="3">Button 3</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

score 0 · Answer 3 · answered Jan 24 '20 at 09:52

Its a pure javascript hide parent element on click try this.

  var g = document.getElementsByClassName('delete');
  for (var i = 0, len = g.length; i < len; i++)
  {

        (function(index){
            g[i].onclick = function(){
                  g[index].parentElement.style.display = "none";
            }    
        })(i);

  }

fadeout jquery in specific div

3 Answers3