Clear out the classes of the other children within the identical parent division

I'm currently in the process of replacing my radio circles with div elements.

I've successfully implemented the functionality for selecting options by clicking on the divs, as well as highlighting the selected div.

However, I'm facing trouble with removing the "selected" class from the other children within the same parent when one option is selected.

This is my current JavaScript code:

$('.option').click(function() {
    $('input', this).prop("checked", true);
    $(this).addClass('optionSelected');
}

http://jsfiddle.net/S7Js8/

htmljquerycssradio-button

Answer №1

Utilize the siblings() method to specifically target divs that are siblings,

$('.choice').click(function() {
    $('input', this).prop("checked", true);
    $(this).addClass('selectedChoice')
           .siblings()
           .removeClass('selectedChoice');
});​

FIDDLE

Answer №2

Give this a shot:

$('.selection').on('click', function() {
    $(this).parent().find('.selection').removeClass('selected');
    $('input', this).prop("checked", true);
    $(this).addClass('selected');
});

If all the choices are related, you can try this approach:

$('.selection').on('click', function() {
    $(this).siblings('.selection').removeClass('selected');
    $('input', this).prop("checked", true);
    $(this).addClass('selected');
});

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

A unique string containing the object element "this.variable" found in a separate file

Snippet of HTML code: <input class="jscolor" id="color-picker"> <div id="rect" class="rect"></div> <script src="jscolor.js"></script> <script src="skrypt.js"></script> Javascript snippet: function up ...

javascripthtmlthis

Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results ...

jquerycsscss-transforms

Filter the ng-repeat list dynamically by triggering ng-click event

I am currently developing an application on that requires users to be able to filter a list of credit cards by clicking on filters located on the interface, such as filtering for only Amex cards or cards with no fees. Although I have successfully bound t ...

javascriptjqueryangularjsfilter

how to toggle a pre-selected checkbox in a Vue component

https://i.stack.imgur.com/6GQl7.png When dealing with a tree view checkbox in Vue, I encountered an issue where editing data within a selected zone should automatically check the corresponding countries based on previous selections. The ID of the selected ...

htmlsqllaravelvue.js

Android mobile browser lacks visibility of certain elements

please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...

htmlcss

What are some techniques for highlighting the significance of specific items within an unorganized list?

My goal is to utilize semantic markup to highlight the importance or priority of each item. Let me illustrate what I mean with an example. <ul itemscope itemtype="http://schema.org/ItemList"> <h2 itemprop="name">Wish List</h2><br&g ...

htmlsemanticsschema.orgmicroformats

The Table is overflowing with an excessive amount of columns

It appears that I have encountered a design issue, which may eventually turn into a technical problem. Currently, I am developing a management website where I frequently need to display tables for users to view data. I have been using jQuery.DataTable to ...

jquerypythondjangodatatables

The functionality of a pop-up window is not compatible with Google Maps

I recently implemented a script on my webpage that triggers a popup window every time the page is loaded. Here's how the script looks: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ColorBox de ...

javascriptjqueryhtmlcss

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

How to fetch database results using jQuery AJAX and PHP's JSON encoding

I am currently working on a PHP code that is triggered using jQuery AJAX to query a database and retrieve results, which are then encoded into JSON format. //$rows is another query foreach($rows as $row) { $sql = 'SELECT field1, field2 FROM tabl ...

phpjqueryajaxjsonresponsetext

Interactive Autocomplete Component

I am encountering issues with passing dynamic data to my autocomplete angularjs directive, which is built using jQuery-UI autocomplete. Below is the current code I am working with: HTML: <div ng-app="peopleApp"> <div ng-controller="indexCont ...

javascriptjqueryangularjsjquery-uiautocomplete

What is the best way to send back data as a response after making a $.post request in PHP?

Looking to set up a basic post function using jQuery that takes the client's name as input and returns their information (address, phone, age, etc.). Here's what I have so far: Script: $(document).ready(function(){ $("#getClientInfo").on(&a ...

phpjqueryajaxpostxmlhttprequest

Is there a way to prevent the typing in a browser textbox from being affected by keyup events when sending a request?

On a website, there is a textbox that allows the user to input their text and receive results by changing the content through an AJAX request response. The issue arises when typing too quickly as the response may not keep up with the typing speed, resulti ...

jqueryhtmlajaxusability

retain focus even after using .blur()

Currently, I am implementing a form submission using AJAX. The form consists of only one input field and the submit button is hidden. My aim is to ensure that when the user hits the enter key, the input field does not lose its focus. Here's the code s ...

javascripthtmlajaxforms

Ways to access a component from Controller?

How can I access the current DOM/jQuery element from within a Controller while running 'legacy code'? function EmailformController($scope) { // Need to find a way to grab the current element here } ...

jqueryangularjs

Guide on utilizing AJAX and Jquery for redirection purposes

I am a beginner in Ajax and I came across this question before, but I am experiencing an issue in the Chrome console. Here is the PHP code snippet: $rs1 = [ 'error' => $blank_err, 'url' => "http://localhost/expe ...

phpjqueryajax

When using CSS to vertically align elements, it only works properly if a <span>

a { display: block; padding: 0 10px; /* background: rgba(0,0,0,0.5); */ height: 100%; border-left: 1px solid rgba(0,0,0,0.1); text-decoration: none; color: white; background-color:rgba(0,0,0,0.5); height:100px; } img { ...

htmlcss

Purging browser cache with the help of jQuery or AngularJS

I am currently working on clearing the browser cache through programming. This is necessary because I have updated the application to a new version, but the browser continues to display the old version and content stored in the cache. I want to ensure that ...

javascriptjqueryangularjscachingbrowser

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

javascriptjquerycssowl-carousel

placing additional containers at the bottom rather than on the right side

Hey there! I'm currently working on a simple website and I'm having trouble getting the duplicated form rows to appear aligned below the previous one. Here's what I have right now: var i = 0; var original = document.getElementById("dupl ...

javascripthtmlcss