Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

removing clicked-on selector from a selector class



1:07 pm on Jun 14, 2013 (gmt 0)

10+ Year Member

I have the following HTML:

<div class="clicks" id="id1" onclick="clickable(this)">
<div class="clicks" id="id2" onclick="clickable(this)">
<div class="clicks" id="id3" onclick="clickable(this)">

with function clickable(el) {...}

In the function, I want to select all divs with class "clicks" EXCEPT the one that triggered the function.

I've tried:
and also:
var ID = $("#" + el.id);

None work; I had this working in the past and can't figure out what I changed to make it fail.


1:23 pm on Jun 14, 2013 (gmt 0)

10+ Year Member

Hmmm...starting to think something else is wrong; I tried:


I assume that should work, but it didn't. Any idea what could be going on? Everything else in the function works fine using $(el)....


1:29 pm on Jun 14, 2013 (gmt 0)

10+ Year Member

Okay, before anyone racks their brain over this, I discovered some peculiar behavior while testing -- will re-post when I figure out what's going on.


2:18 pm on Jun 14, 2013 (gmt 0)

10+ Year Member

I tracked down the culprit. It turns out the method DOES work. It's just that the action I want to perform is to fade out all the other "clicks" classes. This used to work fine, but I've since tweaked my HTML so that each div includes a style class defined as:

display: inline-block !important;

This prevents it from hiding (I can perform any other action on the divs and it works fine. Using say, fadeOut(1000), it even fades for a second, then comes right back). The culprit is the !important tag -- it works fine if I remove it.

Any comments on why jQuery wouldn't override this? Aside from dumping the tag (which may not be an issue), any solutions?


7:47 pm on Jun 14, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

!important is a nasty piece of work - you should avoid it where possible because of the very reason you are now yourself seeing. The only thing that will overwrite an !important rule is another !important rule with a stronger selector.

Anyway, while the correct approach to this problem is to restructure your CSS to remove the need for the !important rule, the following snippet of code should solve your immediate problem.

<html lang="en">
<style type="text/css">
.clicks {
display: inline-block !important;
<div class="clicks" onclick="clickable(this);">Test click</div>
<div class="clicks" onclick="clickable(this);">Test click</div>
<div class="clicks" onclick="clickable(this);">Test click</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.impFadeOut = function() {
var duration = (typeof arguments[0] == 'number')? parseInt(arguments[0]) : 1000;
var callback = (typeof arguments[1] == 'function')? arguments[1] : function() {};
var stepLength = 25; // 0.025 second intervals

return this.each(function() {
var element = $(this);
var step = 1;
var maxSteps = Math.ceil(duration / stepLength);

var opacityPerStep = 100 / maxSteps;
opacityPerStep = opacityPerStep;

var baseStyleString = $(this).attr('style');
if(!baseStyleString) {
baseStyleString = '';
baseStyleString = baseStyleString.replace(/;\s*$/, '').replace(/^\s*;\s*/, '') + ';'

var stepFunc;
stepFunc = function() {
step += 1;
if(step == maxSteps) {
'style': baseStyleString + 'display: none !important;'
var opacityThisStep = opacityPerStep * step;
opacityThisStep = String(100 - Math.round(opacityThisStep));
var ffOpacityThisStep = opacityThisStep;
if(ffOpacityThisStep.length == 1) {
ffOpacityThisStep = '0' + ffOpacityThisStep;

var opacityStyle = 'opacity: 0.' + ffOpacityThisStep + ';';
opacityStyle += '-ms-opacity: 0.' + ffOpacityThisStep + ';';
// I'd like to take this opportunity to say how much I hate old IE
opacityStyle += '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' ;
opacityStyle += opacityThisStep + ')";';
opacityStyle += 'filter: alpha(opacity=' + opacityThisStep + ');';

'style': baseStyleString + opacityStyle

window.setTimeout(stepFunc, stepLength);

function clickable() {

Tested on Firefox 21.0, Chrome 27.0, Opera 12.14, IE 10, IE 10(compat:8), IE 10(compat:7), Safari 5.1

[edited by: whoisgregg at 8:03 pm (utc) on Jun 14, 2013]
[edit reason] Fixed sidescroll :) [/edit]


7:58 pm on Jun 14, 2013 (gmt 0)

10+ Year Member

Wow -- thanks for taking the time to work that out & post it. I see what you mean about !important -- was testing it out for other specs and it does the same for each: jQuery won't override it.

Can't say I like that, but I guess this issue is resolved.


11:08 pm on Jun 14, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

You're welcome :) Your problem piqued my interest and I kinda enjoy working with jQuery and CSS - don't get to do it often enough at work :)

Featured Threads

Hot Threads This Week

Hot Threads This Month