JQuery display toggle buttons

My current situation is as follows:

http://jsfiddle.net/JedtY/1/

Upon examining the result, you will notice that in the first row, there are buttons labeled "Change" and "Delete".

If you click on this row, an additional button labeled "Add" will appear.

This specific row is not functioning as intended.

Now, direct your attention to the next row which is not yet in the basket. When you select this row, only an "Add" button appears. Clicking again will make it disappear. This functionality works correctly.

My problem arises when the item is in the basket. I do not want the "Change" and "Delete" buttons to be displayed initially, but rather only when the row is highlighted (clicked). Additionally, the "Add" button somehow activates and appears, which should not happen.

How can I resolve this issue? Although my JavaScript code may seem messy, particularly the append section where all the HTML is located, I have been unable to find a more efficient method for appending data to the table.

Answer №1

If I understood correctly:

Instead of adding the 'Add' button to the basket on the JavaScript, why not just remove it altogether? You can either delete it so it won't appear anymore, or simply toggle the appearance using the .hideme class.

The reason why the 'Change' and 'Delete' buttons show up immediately is because you have the inline style set to display them.

So, I assume this is what you are aiming for, right?

http://jsfiddle.net/aHA92/

I hope this explanation helps.

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

Add a new span element to a designated span within the webpage

Original Code: <p class="intro" id="186949"><span class="namepart"><span class="name">john cena</span></span> Desired Code: <p class="intro" id="186949"><span class="namepart"><span class="name">john cena& ...

Send user input to a Controller method using Ajax

I am working on a MVC3 page that includes a link (Ajax.ActionLink). When the user clicks this link, it triggers a controller action and the result is displayed in a div, replacing the existing content. Here is the code snippet: @Ajax.ImageActionLink("/Im ...

Assistance with the JQuery Validation Plugin

Currently, I am utilizing the JQuery validation plugin to validate a form. However, in addition to displaying an error message, I also want it to modify the CSS for the td element above it. This is my current implementation: function handleValidationError ...

Can a low-opacity gradient be merged with a solid background color?

Can anyone help with this code snippet? Here's the link table { height: 200px; width: 200px; background-color: #444557; /* seems to be hidden by the gradient */ /* Here is the CSS for a gradient background */ /* Source: http://colorzilla ...

Fetch additional information via Ajax request when button is clicked within MVC 4

I am building a feature to display 6 records in an HTML table with a button labeled Load More. The goal is for each click of the button to retrieve another set of 6 records. Here's what I have tried so far: Within the Controller [HttpGet] private Js ...

What is the method for displaying specific text lines in italic format within the TextArea Tag in SAP Fiori Apps?

I need to format specific text lines in the "TextArea" tag of my SAP Fiori App in italic. The data for my text area is retrieved from a SAP OData Service as an Array. I am currently displaying the data using a loop and setting it as follows in my Java ...

Title Bar: Excessive gap; inaccurate navigation to nearby link

I've been trying to align a horizontal navigation bar right below a banner and link directly to specific sections on the same page. No matter what I do, I can't seem to remove the white space between the banner image and the navigation bar. It ...

I am having trouble with my :hover selector being interrupted by text, what steps should I take to resolve this

My issue revolves around an image with a hover effect that changes the box shadow color. However, there is text on the image that also changes when clicked, creating a problem where the area occupied by the text prevents the box shadow from displaying prop ...

Is it possible to attach the entered URL to an image following the text that has been inputted?

I've coded everything but the jquery part isn't working. Enter URL :<input type="text"> <button id="btn"> continue </button> <div contenteditable="true" id="bod"> Click here to start typing</div> $(document).ready( ...

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

Preserve the aspect ratio of a div even when the height changes dynamically

I was intrigued by the idea of creating a square div using only CSS, where its height adjusts dynamically and its width scales based on that height. In the snippet below, you can see that the container's height adapts based on its content. The red ...

The 'blur' event in jQuery is not functioning as expected for file input fields

I am experiencing an issue with a form on my website. The form saves the record on each field blur event, but I noticed that when I select a file for the file field, it also saves the record, which is not the behavior I expected. I want the save action to ...

Using iScroll with jQuery causes issues when a partial postback occurs

I recently came across a script called iScroll that functions as a one-figure scroll mechanism for vertical lists on iPad devices. To implement it, all you need to do is include the following: <script type="text/javascript" src="http://cubiq.org/dropbo ...

What is the best way to align this button directly below my paragraph?

I'm facing an issue with a tile on my website that flips over upon hovering. I tried adding a button on the back of the tile, but it ends up hanging off the bottom. I'm unsure of how to position it below the paragraph on the back of the tile. Add ...

One side of the page has a contrasting background color compared to the other

Is it possible to create a fixed-width layout with different background colors on either side of the page, where the background colors extend infinitely regardless of how far you zoom out? Creating a 9000x10 px image would not achieve this effect as it wou ...

Instructions for compiling node-sass within the present directory for specific files

In my project, the directory structure looks like this: - folder1 - styles1.scss - folder2 - styles2.scss I want to utilize node-sass through the command line to generate the following output: - folder1 - styles1.scss - styles1.css - folder2 ...

What is the best way to increase the padding in a Colorbox modal window?

Is there a way to increase the padding in a Colorbox modal window? I want some extra space between the edges of the modal window and the actual content. I experimented with the innerWidth and innerHeight properties, but unfortunately, I didn't notice ...

Please submit the form triggered by a JavaScript event

I am looking to create a form that can be submitted when a user presses a key, such as tab or enter, which would cause them to lose focus. Additionally, clicking outside of the text field should also trigger a submit action. However, if the user clicks on ...

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

Unable to Locate CSS File in Separate Folder in HTML

I am struggling to link my stylesheet from a different directory to my HTML files, even though I believe I am using the correct method. Could it be that I am targeting the wrong level? '-' represents levels Take a look at my file structure: my ...