CODEWITHSUNDEEP
jquery
RajivRisi
RajivRisi

Reputation: 398

remove other elements and leave selected element jQuery

I have a multiple select boxes which is having list of colors. Each select boxes are in div elements. When I choose 'No Color' from dropdown, I need to remove all other elements with the class name 'colorfield' but I don't want to delete the parent element of selected dropdown. I did code upto find when the user choose no color. But I completely blank of achieve my above requirement. My Code here : http://jsfiddle.net/tkqrwpp6/

Html:

<div style="float: left;width:100%; border:1px dashed #1DB3F0;" class="colorinputs">
    <div listnumber="5" id="list_5" class="colorfield listitem" style="float: left; margin: 12px 10px 10px; width:100%;">
        <div style="float:left;" class="image_text">
            <span>List Name:</span>
            <select class="" style="width:100px;color:gray;" onchange="javascript:changeListValues(this,'5','5')" name="attribute_name[5]" id="list_selector_5">
                <option value="0" sizename="no_size">No Size</option>
                <option value="1" selected="selected">color</option>
            </select>
        </div>
        <div class="attribute_box attrInput">
            <span>Color :</span>&nbsp;
            <select style="width: 100px; color: gray; display: inline-block;" class="select_list_value valid" name="attribute_val[5]" parent="list_5">
                <option value="">--Select--</option>
                <option value="1">blue</option>
                <option value="2">white</option>
                <option value="3">red</option>
                <option value="4">pink</option>
                <option value="5" selected="selected">purple</option>
                <option value="6">skyblue</option>
                <option value="7">green</option>
                <option value="8">yellow</option>
                <option value="9">orange</option>
                <option value="10">brown</option>
                <option value="11">black</option>
                <option value="12">silver</option>
                <option value="13">gold</option>
                <option value="39">No Color</option>
            </select>
        </div>
    </div>

    <div style="clear:both;"></div>

    <div listnumber="6" id="list_6" class="colorfield listitem" style="float: left; margin: 12px 10px 10px; width:100%;">
        <div style="float:left;" class="image_text">
            <span>List Name:</span>
            <select class="" style="width:100px;color:gray;" onchange="javascript:changeListValues(this,'1','6')" name="attribute_name[6]" id="list_selector_6">
                <option value="0" sizename="no_size">No Size</option>
                <option value="1" selected="selected">color</option>
            </select>
        </div>
                <div class="attribute_box attrInput">
            <span>Color :</span>&nbsp;
            <select style="width: 100px; color: gray; display: inline-block;" class="select_list_value" name="attribute_val[6]" parent="list_6">
                <option value="">--Select--</option>
                <option value="1" selected="selected">blue</option>
                <option value="2">white</option>
                <option value="3">red</option>
                <option value="4">pink</option>
                <option value="5">purple</option>
                <option value="6">skyblue</option>
                <option value="7">green</option>
                <option value="8">yellow</option>
                <option value="9">orange</option>
                <option value="10">brown</option>
                <option value="11">black</option>
                <option value="12">silver</option>
                <option value="13">gold</option>
                <option value="39">No Color</option>
            </select>
        </div>
    </div>

    <div style="clear:both;"></div>

    <div listnumber="7" id="list_7" class="colorfield listitem" style="float: left; margin: 12px 10px 10px; width:100%;">
        <div style="float:left;" class="image_text">
            <span>List Name:</span>
            <select class="" style="width:100px;color:gray;" name="attribute_name[7]" id="list_selector_7">
                <option value="0" sizename="no_size">No Size</option>
                <option value="1" selected="selected">color</option>
            </select>
        </div>
                <div class="attribute_box attrInput">
            <span>Color :</span>&nbsp;
            <select style="width: 100px; color: gray; display: inline-block;" class="select_list_value" name="attribute_val[7]" parent="list_7">
                <option value="">--Select--</option>
                <option value="1">blue</option>
                <option value="2">white</option>
                <option value="3">red</option>
                <option value="4">pink</option>
                <option value="5">purple</option>
                <option value="6">skyblue</option>
                <option value="7">green</option>
                <option value="8">yellow</option>
                <option value="9">orange</option>
                <option value="10" selected="selected">brown</option>
                <option value="11">black</option>
                <option value="12">silver</option>
                <option value="13">gold</option>
                <option value="39">No Color</option>
            </select>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

Js Code:

$(".select_list_value").live('change',function(){
    var val1 = $(this).find("option:selected").val();
    if(val1 == 39) {
        var r = confirm('If you choose No color, other colors will be removed. Are you sure?');
        if(r == true) {
            alert('True');
        } else {
            alert('cancelled');
        }
    }       
    if(val1 != '') {
        var text = $(this).find("option:selected").text().toUpperCase();
        var error = 0;
        $(".select_list_value").each(function(){
            var val2 = $(this).find("option:selected").val();
            if(val1 == val2) {
                error++;
            }
        });
        if(error > 1) {
            alert(  text+' already selected!!! Please choose different color');
            $(this).val('');
        }
    }
});

Upvotes: 0

Views: 126

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

Select all divs with class colorfield and use not() to eliminate the current one:

$(".colorfield").not($(this).closest(".colorfield")).remove();

EXPLANATION:

$(this).closest(".colorfield") will give you current element's parent div with class colorfield and it is eliminated from the collection using not().

UPDATED FIDDLE:

http://jsfiddle.net/tkqrwpp6/1/

Upvotes: 2

Related Questions