A step-by-step guide on using Jquery to fade out a single button

My array of options is laid out in a row of buttons:

 <div class="console_row1">
            <button class="button">TOFU</button>
            <button class="button">BEANS</button>
            <button class="button">RICE</button>
            <button class="button">PASTA</button>
            <button class="button">QUINOA</button>
            <button class="button">SOY MILK</button>
</div>

I'm currently working on a functionality where clicking on a button will only fade out that specific button. Here's the Jquery code I have so far:

 $(document).ready(function(){
            $(".button").click(function(){
                $(".button").fadeOut()    
            });    
        });

Answer №1

Utilize $(this). Using this will provide the reference to the member that triggers the current function. Further information can be found here.

 $(document).ready(function(){
            $(".button").click(function(){
                $(this).fadeOut();    
            });    
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="console_row1">
            <button class="button">TOFU</button>
            <button class="button">BEANS</button>
            <button class="button">RICE</button>
            <button class="button">PASTA</button>
            <button class="button">QUINOA</button>
            <button class="button">SOY MILK</button>
</div>
And I'm attempting to create a program where clicking on a button only causes that specific button to fade out. The jQuery code I have is as follows:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can anyone explain why two of my SVG files are displaying as identical in my React project?

The issue seems to lie within the SVG code itself. I have two SVGs exported from Figma and imported into ReactJS as ReactComponents. However, an anomaly occurs where React recognizes both SVGs as identical despite having different SVG codes. This makes me ...

Transforming a string into an array via AJAX response

I have been working on some ajax code that is returning an array as a string. My goal is to display either the first value or the second one in the array, like response.total or response[0]. When I check the response using console.log(response), here is w ...

Strange Scrolling Issues in Blackberry Webworks when Using Touchscreens

Within my Blackberry Webworks app designed for Smartphones OS 6, 7, and 7.1, there is a portion of code that looks like this: <div style="width:100%; height:100%; overflow:hidden;"> <div style="overflow:auto;height:100px;width:100%;"> ...

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

Get the large data file in sections

I ran a test script that looks like this: async function testDownload() { try{ var urls = ['https://localhost:54373/analyzer/test1','https://localhost:54373/analyzer/test2'] var fullFile = new Blob(); for (le ...

Tips for inserting information into HTML components in JSP

Hey everyone, I'm diving into JSP for the first time and I'm trying to wrap my head around how to display data from an ArrayList in my HTML. Can someone help me out? I'm thinking of doing something like this: <article> <p>< ...

Identify a specific sequence within a text box, and alternate between two radio buttons

Within my search field, I have integrated two radio buttons that allow the user to choose between a regular keyword search or a license plate search. By default, the "keyword" option is pre-selected. However, I am looking for a way to use jQuery to automa ...

JavaScript Event Listener causing the Sticky Position to Break

I am currently dealing with a situation where I want to create a slide-in side menu that remains sticky. However, when I apply the position: sticky CSS property to my menu container, it causes the entire menu to be displayed (instead of being pushed off th ...

Swapping mouse cursor using JavaScript

Currently, I am working on a painting application in JavaScript that utilizes the Canvas Object. I would like to customize the mouse cursor when it hovers over the Canvas object. Can anyone advise me on how to accomplish this? ...

How can the AngularJS model be updated while using long polling with Ajax?

How can I update the model using ajax long polling method? To start, I will load the default list: For example: - id1 - id2 - id3 Next, I set up an ajax long polling process in the background that runs every 5 seconds. When the ajax call receives an upd ...

Using JavaScript to parse JSON and set the value of a DatePicker

I have a text input field in my .cshtml page which is a Date type field. <div class="form-group"> <label for="comments">ETA:</label> <input class="form-control text-box single-line" data-val="true" id="MilestoneETAEdit" name ...

No input value provided

I can't figure out what's going wrong. In other js files, this code works fine. Here is my HTML code: <table class='table'> <tr> <th>Event</th><td><input class='for ...

Instead of receiving my custom JSON error message, Express is showing the server's default HTML error page when returning errors

I have set up a REST api on an Express server, with a React app for the front-end. The design includes sending JSON to the front-end in case of errors, which can be used to display error messages such as modals on the client side. Below is an example from ...

Eliminate lower values in select 1 if the value selected in select 2 is higher

I am struggling with a particular piece of code and could really use some assistance. Within my project, I have two select boxes. The first box allows users to select the "from" year, while the second box is for selecting the "to" year. What I'm tryi ...

CORS policy blocked Deepl API request

For the past few months, I successfully integrated Deepl API into our Web CRM. However, things took a turn a few days ago. I can't pinpoint exactly when, but it might have been since the start of the new year. Now, every request is being blocked by s ...

What is the best way to incorporate the icon directly from the .svg sprite into CSS/SCSS?

An irate customer is demanding that I use all icons inside an SVG file according to 2023 standards. This includes icons for background images and normal icons that can be easily changed. I currently utilize an SVG sprite in the following format: <?xml ...

Display a popover by making an Ajax request

When attempting to display a popover on hover of an image, I encounter an issue where the content of the popover is not being shown. This content is retrieved through an Ajax call to a template, which includes a tag used in a taglib that renders the popove ...

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

I'm struggling to insert my contact form code into the contact tab without it interfering with the tab bar. I want the form to appear in the middle of the page when the tab is clicked. I've tried various placements for the code but none seem to ...

Is there a way to retrieve the same post from one controller and access it in another?

Hello, I am currently exploring the world of Full Stack web development and have stumbled upon a challenge. My tech stack includes mongodb, mongoose, node, and express. Within my project, I have implemented two controllers - one for user signup and anothe ...

Tips for correctly implementing CORS (Cross-Origin Resource Sharing)

Is there a way to securely access a resource from a third-party domain using XML HTTP Requests (XHR, AJAX)? I have set up CORS on both the target and origin sides with the following configuration: Access-Control-Allow-Origin: http://www.example.com, http ...