How do I fade out any specific element that is clicked on using jQuery?

Question

I'm trying to create a jQuery function to fade out any specific element that the user clicks on within the webpage.

I have tried using the universal selector to target all the elements, but then when I click an element every single element on the page fades away. Im trying to fade away only the clicked element and the rest of the page stays.

I was thinking of adding and event listener to all elements of the page and then removing the parent node of the clicked element?

Here is my code so far:

$("*").click(function () {
  $("*").fadeOut(3000);
});

So yeah that's the function I've created already.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ikigai</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="restaurant.js" type="text/javascript"></script>
    <link rel="stylesheet" href="restaurant.css" />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap");
    </style>
  </head>
  <body>
    <img
      class="background"
      class="fade"
      src="restaurant.jpg"
      style="display: none"
    />
    <h1 class="heading" class="fade">Ikigai</h1>
    <div class="container">
      <h1 class="story" class="fade">Our Story</h1>
      <p class="story-p" class="fade">TEST</p>
      <img
        class="storyPic"
        class="fade"
        src="/pexels-kaboompics-com-6267.jpg"
      />
      <h1 class="food" class="fade">Our Food</h1>
      <p class="food-p" class="fade">TEST</p>
      <img class="foodPic" class="fade" src="/pexels-huy-phan-1409050.jpg" />
      <h1 class="people" class="fade">Our People</h1>
      <p class="people-p" class="fade">TEST</p>
      <img class="peoplePic" class="fade" src="/pexels-cottonbro-4253300.jpg" />
    </div>
  </body>
</html>

Above is the html Im looking to manipulate!

Any ideas ?

Thanks

Tushar Gupta · Answer 1 · 2022-03-18T11:24:00.580

1

You can change a few things to make your code work

Use .on() to bind click function to all elements (Difference between .on('click') vs .click()) Not mandatory but a good practice
use $(this) to target clicked element
Use e.stopPropagation(); to prevent event bubbling

Working code below

(Click on any item) [if you click on page area, the whole page would fade, so try to click on elements to see the effect)

$("*").on('click', function(e) {
  e.stopPropagation();
  $(this).fadeOut(1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>I am a Div</div>
<ul>
  <li> list 1 </li>
  <li> list 1 </li>
</ul>

edited Mar 18 '22 at 11:24

answered Mar 18 '22 at 11:16

Tushar Gupta

15,504
1
29
47

@Jordan Bendon did the answer helped? – Tushar Gupta Mar 19 '22 at 11:35
Hey Tushar yes this was also the solution I used, thanks so much for your help :) – Jordan Bendon Mar 19 '22 at 11:58

score 0 · Answer 2 · answered Mar 18 '22 at 11:08

0

You can use $(this) to refer to the item that was clicked, so it could become:

 $(this).parent().fadeOut(3000)

answered Mar 18 '22 at 11:08

Kokodoko

26,167
33
120
197

$("*").click(function () { $(this).parent().fadeOut(3000); }); I've tried it like this, but there is no response. Is that the way you meant it? – Jordan Bendon Mar 18 '22 at 11:17

Manish · Accepted Answer · 2022-03-19T09:20:51.243

0

You will have to target the element clicked. Because the click event propagates which results in the event handler for each element being executed. Event Propagation

So to achieve what you want you will have to stop the event from propagating. Below is a working sample of this.

// thi statement attaches a click event hadler with every element
$("*").click(function($event) {
  // below statement stops the event from propagation
  $event.stopPropagation();
  // below statement fades the clicked element out
  $(this).fadeOut(3000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div> first div</div>
<div> second div</div>
<div> third div</div>
<div> fourth div</div>

edited Mar 19 '22 at 09:20

answered Mar 18 '22 at 11:16

Manish

4,692
3
29
41

Still not working sadly.. Only fades away the entire page.. – Jordan Bendon Mar 19 '22 at 07:12
` $(this).fadeOut(3000);` is very important. Are you sure you have it with `this`, because in your question you have a `*` instead of `this` . `*` will fadeout every element as it targets all elements. – Manish Mar 19 '22 at 09:12
$(this).on("click", function (e) { e.stopPropagation(); $(this).fadeOut(1000); }); This is how my function is written right now, but it does nothing when i click on any element. Nothing fades out unfortunately even with the $(this) statement. – Jordan Bendon Mar 19 '22 at 09:14
@JordanBendon in my code if you see i have different code, try using that. Or change your code to `$('*').on("click", function (e) { e.stopPropagation(); $(this).fadeOut(1000); });` – Manish Mar 19 '22 at 09:18
Im afraid this code also fades out the whole page.. So confused as to why... – Jordan Bendon Mar 19 '22 at 09:19
It seems like the $(this) statement isn't having an effect? – Jordan Bendon Mar 19 '22 at 09:20
@JordanBendon look out the code again, i have added comments which help you understand what each lines does. – Manish Mar 19 '22 at 09:21
@JordanBendon also you can see this snipped can be executed here with that `Run code snippet` button and you can see it works. – Manish Mar 19 '22 at 09:24
Thank you I see that. However, $(this).fadeOut(3000); is not targeting a specific element to fade out, its fading out the entire page. Maybe the it is still propogating? – Jordan Bendon Mar 19 '22 at 09:27
@JordanBendon in that case i would like to have a look at your code better. Can you add your minimal code here https://jsfiddle.net/3g4rx0hp/ – Manish Mar 19 '22 at 09:32
Ah yes okay sorry I see that it works on Run Code Snippet. Then I think the issue is applying it to my particular html code. – Jordan Bendon Mar 19 '22 at 09:32
I'll try apply it to my html! I'll also update the question with HTML! Thanks :) – Jordan Bendon Mar 19 '22 at 09:32
Cool. Hope this solves your problem :) – Manish Mar 19 '22 at 09:33
I just edited the html in.. Maybe you can understand why it fades everything instead of specific elements :) – Jordan Bendon Mar 19 '22 at 09:36
Do this the `jQuery` code from the snippet in this answer make sure it starts on the first line of your `restaurant.js` file and if your are using `$(document).ready` then first line inside that. – Manish Mar 19 '22 at 09:39
There is one more problem is see wit your `HTML` code. You have the `class` attribute twice. Instead it should be just one with as many classes you want e.x. `class="food fade class3 class4"` – Manish Mar 19 '22 at 09:41
Okay thanks Ill try that! – Jordan Bendon Mar 19 '22 at 09:46
I got it to work with your advice! It was to do where I was injecting that jquery library and putting the javscript script tag at the bottom of the body! – Jordan Bendon Mar 19 '22 at 11:57
@JordanBendon glad could help :) – Manish Mar 20 '22 at 06:38

How do I fade out any specific element that is clicked on using jQuery?

3 Answers3