Question

I am trying to create a jQuery script that would remove a div/s based on what the class of the parent div is, for example based on the parent div class below i.e one-column I would like remove divs sideColumn-two & sideColumn-three

<div id="footer" class="one-column">
    <div class="wrapper">
        <div class="contentColumn">
            Main Content Column
        </div>
    </div>

    <div class="sideColumn-one">
        Side Column 1
    </div>

    <div class="sideColumn-two">
        Side Column 2
    </div>

    <div class="sideColumn-three">
        Side Column 2
    </div>       
</div>

And if the parent’s div class is two-column then it would remove divs sideColumn-one and sideColumn-three, and so forth.

Additional Info – The parent divs are called as follows:

one-column
one-column-three
one-column-two-one
two-columns-left-sidebar
two-columns-right-sidebar
two-columns-equal
two-columns-equal-right
two-columns-50
two-columns-stacked-left
two-columns-stacked-right
two-columns-mixed
two-columns-mixed-left
two-columns-mixed-content-left
three-columns-mid
three-columns-equal
three-columns-sidebars-right
three-columns-sidebars-left
four-columns-equal
four-columns-mag

The div contentColumn is never removed

Any help would be greatly appreciated.

Answer 1

Edit: For updated markup

var num = $("#footer").attr("class").replace("-column","");
$("#footer > div:gt(0):not(.sideColumn-" + num + ")").hide();​

You can try it here

---

Previous answer: Without changing your markup, you could so something like this:

var nums = { one: 1, two: 2, three: 3 };
var num = $("#test").attr("class")​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​.replace("-column","");
$("#test > div:not(.col" + nums[num] + ")").hide();​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You can give it a try here, though if you simplfied it by giving the parent the same class for example:

<div id="test" class="col1">
    <div class="col1">
        Col 1
    </div>
    <div class="col2">
        Col 2
    </div>    
    <div class="col3">
        Col 3
    </div> 
</div>​

The script gets simpler, like this:

$("#test > div:not(." + $("#test").attr("class") + ")").hide();​

You can try that version here, if you want to remove instead of hide them, just replace .hide() with .remove().