Modify the css to style the identical listview

Currently, I have an application (jQuery mobile 1.4.3) that contains a List View where I'm dynamically populating the list using AJAX. The challenge I am facing is that I want to adjust the CSS so that certain elements like buttons and left side space are hidden or modified when clicking/loading button 2222.

To see a demonstration of the issue, you can visit this jsfiddle link: JSFIDDLE (CLICK the button 2222 to show list)

Below is a snippet of the code in question:

function func1111() {
    // Code for dynamically creating list items with buttons
}

I apologize if my explanation was unclear. Thank you for any help in advance.

javascriptjqueryhtmlcssjquery-mobile

Answer №1

To manipulate the UL element, you can use two separate functions. In one function, add the class has-editBtns to the UL, and in the other function, remove it:

function addEditBtnClass() {
    var $menuList = $("#suggestions-list");
    $menuList.empty().addClass('has-editBtns');
    ...

function removeEditBtnClass() {
    var $menuList = $("#suggestions-list");
    $menuList.empty().removeClass('has-editBtns');
    ...

Check out the updated version on FIDDLE

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

AngularJS ng-repeat specific filter conditions

Below is the code that I currently have: <div data-ng-if="hasSelectedCompany"> <tbody data-ng-repeat="driver in result.applications | filter: { name: selectedApplication } track by $index"> </div> <div data-ng-if="hasSelectedSuppor ...

javascriptangularjsangularjs-ng-repeatangularjs-filter

What is the process for including a new column in a table created using the FixedTable jQuery plugin?

I'm a beginner with the jQuery FixedTable extension. How can I insert a new row into a table that already exists? I need guidance on how to accomplish this task. ...

jqueryhtmljquery-plugins

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...

javascripthtmlcssvue.js

The values coming from my cascading combo boxes are incorrect

My form contains drop down boxes with options that dynamically change the values of the next drop down box based on the selection. When I choose the first training option, the dates are successfully sent through the form to my email address. However, i ...

javascripthtmlcss

Show dynamic HTML Dropdowns with nested JSON data

I've been racking my brains trying to implement this specific functionality in the UI using a combination of HTML5, Bootstrap, CSS, and JavaScript. My goal is to create dropdown menus in the UI by parsing JSON input data. Please Note: The keys withi ...

javascripthtmljsondynamicdropdown

Using PHP to call Datatables through AJAX

I am attempting to load JSON data from my PHP page into a DataTable using the following JavaScript: $(document).ready(function() { $('#detailed').DataTable({ "ajax": { "url": "myphpPage.php", "dataSrc": "data" ...

jqueryajaxdatatables

Break free/Reenter a function within another function

Is there a way to handle validation errors in multiple task functions using TypeScript or JavaScript, and escape the main function if an error occurs? I am working in a node environment. const validate = () => { // Perform validation checks... // ...

javascriptnode.jstypescript

Using d-flex instead of col in Bootstrap 4

With the new Bootstrap 4 transitioning from using 'floating' elements to the improved 'flexbox' method, I can't help but wonder if it's acceptable to build the entire grid structure using .d-flex instead of the conventional .c ...

htmltwitter-bootstrapcssflexbox

Dynamically added input elements in AngularJS are causing issues when trying to retrieve the states of form input elements

<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function ...

javascriptangularjs

Using THREE.js to animate objects and have them settle onto a specific face

I'm currently working on adding pins to a curved map of the US, but I'm facing some challenges. Right now, I'm using mathematical calculations to determine their distance from the highest part of the curve and adjust their height accordingly ...

javascriptthree.js

The d3.max function is returning inaccurate date values

I've encountered a strange issue while working on an overview page. I need to display the maximum date from loaded data to provide users with the time period they're looking at. Even though I already know what date it should be (either today or y ...

javascriptdated3.jsmax

Tips for displaying consecutive information from a Sequelize query with associations in Node.js

Attempting to create a straightforward sequential output from a demo Node.js app and Sequelize has proven to be challenging for me. I'm struggling to comprehend how promises and Bluebird can assist me in achieving the desired result: User: John Doe ...

javascriptnode.jsecmascript-6sequelize.jses6-promise

Update the entire content of an HTML document on the spot

Is there a way to replace the entire HTML document in-place without using a data URI to store it and prevent it from being saved in the browser's history? I attempted to use jQuery("html").html("<html>....</html>"), but unfortunately, the ...

jqueryhtmlin-place

I have developed an interactive image carousel that allows users to click on each image for further exploration

Whenever I try to add an event to the image, it appears to be getting blocked by something, causing my function not to execute. Here is my slider setup: <ion-slide-box slide-interval="4000" auto-play="false" does-continue="true" show-pager="true"> ...

javascriptangularjshtmlionic-framework

What is the proper location to place the CSS I wish to implement for a module?

As I embark on creating my inaugural DotNetNuke website, I find myself faced with the task of adding an HTML module to a page. To style the text within it, I have been advised to utilize CSS classes. I'm curious about where .css files should be place ...

htmlcssmoduledotnetnuke

Concealing additional elements using a single input field

Could you please assist me with a quick solution for my Javascript code? I have an input field that hides a DIV element only if it is completely empty: if (search_value !== "") { document.getElementById("frei").className = "fre ...

javascripthtmldom-eventshide

Implementing multiple perspectives on a single webpage by keeping track of the browsing history with AngularJS and leveraging the

Within my AngularJS application, I have an about page that contains various sub-sections, all within the same template. My goal is to have each section accessible through its own unique URL that will automatically scroll down to the corresponding section i ...

javascriptangularjsangular-ui-router

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line? I'm unsure of which CSS properties would achieve this effect. I've attempted using overflow-wrap: break-word; word-break: break-al ...

javascripthtmlcsstypescript

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

I manage a website that dynamically fetches content from a database, with varying contents for each label. For example, one label may be generated as General:, while another may be generated as TV:. My question is, can jQuery be used to replace the text NA ...

javascriptjqueryhtmlcss

Issues with the File plugin in Ionic 2

Currently, I am working on integrating Quickblox into my Ionic2 application. I have successfully implemented all the required functionalities except for file uploading. In Quickblox, there is a specific function that needs to be used for uploading files, a ...

javascripttypescriptionic2cordova-pluginsquickblox