Hide the first dot indicator on the carousel when it is clicked

I've been experiencing a strange issue with my carousel - whenever I click on any of the dots, dot1 disappears. Upon inspecting the CSS, I found out that when clicking on a dot, it receives a display:none property from somewhere.

Here is the code for the dots:

<ol class="dotss carousel-indicators" style="margin-top: 20px;z-index: 0;">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="abc active" id="a"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class="abc" id="b"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class="abc" id="c"></li>
</ol>

This is the code I'm using to color the dots:

$("ol li").click(function(){
    var id = $(this).attr('id');
    
    if (id == "a") {
        $("#a").css("background-color", "white");
        $("#b").css("background-color", "#247ba0");
        $("#c").css("background-color", "#247ba0");
    }
    if (id == "b") {
        $("#b").css("background-color", "white");
        $("#a").css("background-color", "#247ba0");
        $("#c").css("background-color", "#247ba0");
    }
    if (id == "c") {
        $("#c").css("background-color", "white");
        $("#a").css("background-color", "#247ba0");
        $("#b").css("background-color", "#247ba0");
    }
});

Here is the live link:

Answer №1

Here is a suggested solution for you:

$(document).on('click', '.undo_comment_delete_js', function () {});

Feel free to give it a try!

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

Confirm the data within an HTML table and apply color coding to the cells appropriately

Currently, I have an HTML table used to automatically validate data collected from soil pollutants analyses. Here is a snippet describing the table structure: <table id="table1"> <thead class="fixedHeader"> <tr><input type="submit" ...

Create a toggle effect similar to jQuery using JavaScript

Looking for pure JavaScript code to implement show/hide functionality similar to jQuery. Currently, I am using the following code: y=document.getElementById('regform').style.display; if (y == 'block'){ document.getElementById(&apo ...

Using request-promise from npm, send a request with a self-generated certificate in JavaScript

When trying to make a simple request using the request-promise library, I encountered an error due to having a self-signed cert in my chain. This is a requirement that cannot be avoided. Fortunately, with NPM, I was able to specify the cert for installing ...

Leveraging jquery's $.ajax method to send GET values to a PHP endpoint

Is it possible to use an AJAX call to pass a value to a PHP script? For example, if I have the URL example.com/test.php?command=apple, how can I make sure that the code is executed properly on the server side? This is how my code looks like: PHP: <?p ...

Tips for creating a complex concatenation Grunt script that can identify matches across multiple directories

Looking to create a complex concatenation script using grunt. Check out my starting setup below: ___js |____dist | |____vents | | |____commonEvents.js | | |____compare.js |____libs |____src | |____events | | |____carousel.common.js | | |____compare.js | | ...

What steps do I need to take to retrieve my paginated data from FaunaDB in a React frontend application?

I am facing a challenge when trying to access the data object that contains the keys (letter and extra) in my response from the faunadb database to the frontend react. Although I have used the map function in my frontend code, I have not been successful ...

Troubles arise when hovering over the <strong> tag and the <h4> element

While hovering over my h4 tag in the table, everything functions correctly. However, when I hover over the strong tag inside the h4 element, the strong tag inherits the same hover effect as the h4 tag. The structure of each td element within the table is ...

Filling out a Form in Advance

I'm having trouble populating a form in a new window using JQuery. The new window opens as expected, but I can't get the form to populate successfully. $( "body" ).delegate( ".propose", "click",function() { var url = './prop_form.php& ...

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

After an ajax request, the Jquery hover effects are no longer functional

On my website, I have implemented ajax calls to filter product results and apply effects. However, the effects on these products seem to stop working after the ajax call is completed. Located at the bottom of the page's code is the following script: ...

Is it possible to set up a universal type definition in TypeScript version 2 and above?

I have a collection of straightforward .ts files, not part of any projects but standalone .ts scripts. They implement certain node.js features. Both TypeScript and node type definitions are set up through the following commands: npm install -g typescript ...

execute a method encapsulated within a factory from external to AngularJS

Although this question is similar to others posted here, none of the solutions provided have worked for me. My Cordova/AngularJS/Ionic app currently polls a remote server every 10 minutes to retrieve JSON data, and push notifications are working correctly ...

"Wordpress Pluto theme: A stellar choice for your

I'm trying to add a link in my main template.index file that will redirect to one of my pages when clicked on the JavaScript button at the top in Pluto theme. Currently, the text is there but clicking on it opens something I don't want. Here&apo ...

What is the best way to adjust the placement of a component to remain in sync with the v-model it is connected to?

I am encountering an issue with 2 sliders in my project. I have set it up so that when the lower slider's value is greater than 0, the top slider should automatically be set to 5. I am using a watcher function for this purpose. However, if I manually ...

experiment with jest and react-testing-library for testing functions

I'm having trouble accessing a method inside a functional component in React using Jest and react-testing-library. I attempted to use enzyme, but it seems like everything is shifting towards RTL instead. import React from "react"; const simpleCompo ...

Corrupted ZIP file being downloaded by FileSaver

After sending a request from my React front-end to my Node back-end, the expected zip file download results in a CPGZ file instead of decompressing the zip. Any assistance in resolving this issue would be highly appreciated. Thank you! React Code downloa ...

Tips for minimizing excessive repetition in your for loops

I'm currently working on developing a Chess game and I've encountered an issue with code redundancy within my Bishop class. My goal is to create a function that can determine all possible moves of a bishop on the board. In order to achieve this, ...

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

show.bs.modal event does not trigger within a bootstrap 4 modal that is loaded externally

I am trying to implement a feature where a common modal dialog can be loaded into any page from an external file. While the functionality works, I am facing an issue where the show.bs.modal and hide.bs.modal events are not triggered when the modal markup i ...