Question

我有多个选择框，其中包含颜色列表。每个选择框都在div元素中。当我从下拉列表中选择“No Color”时，我需要删除类名为“colorfield”的所有其他元素，但我不想删除所选下拉列表的父元素。当用户选择没有颜色时，我做了代码。但我完全没有达到上述要求。我的代码在这里：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代码：

$(".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('');
        }
    }
});

Answer 1

选择所有具有 colorfield 类别的div并使用not()来消除当前的div：

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

说明：

$(this).closest(".colorfield")会为您提供当前元素的父级div，其中包含 colorfield ，并使用not()从集合中删除它。

更新的FIDDLE：

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

删除其他元素并保留选定的元素jQuery

1 个答案:

说明：

更新的FIDDLE：