请问select绑定change不能remove子节点和父节点是什么原因?

Question

<div id="setSku" class="tab-pane fade">
    <table id="table_report" class="table table-striped table-bordered table-hover">
        <tr>
            <td style="width:75px;text-align: right;padding-top: 13px;">商品规格:</td>
            <td>
                <div class="btn btn-mini btn-primary addSpecGroup" style="float: right;">添加规格项目</div>
            </td>
        </tr>
    </table>
</div>


//添加一组规格
$(document).delegate(".addSpecGroup","click",function(){
    //判断是否到三组
    if($(".spec_group").length > 2){
        alert("最多可以添加三个规格!");
        return;
    }
    var specGroup = '<div class="spec_group">'+
                        '<div class="col-xs-12">'+
                            '<div class="col-sm-3">'+
                                '<select class="chosen-select form-control productSpec SKU_TYPE" name="productSpec" id="productSpec" >'+
                                    <c:forEach items="${specifications}" var="spec">
                                        '<option value="${spec.id}">${spec.name}</option>'+
                                    </c:forEach>
                                '</select>'+
                            '</div>'+
                        '</div>'+
                        '<ul class="specVal-ul">'+
                            '<div class="specVals"></div>'+
                            '<div class="btn btn-mini btn-primary cloneSkuVal" >添加</div>'+
                        '</ul>'+
                    '</div>';
    $(this).before(specGroup);
});

//选择规格
$(document).on("change",".productSpec",function(){
    console.log($(this).parent(".spec_group"));
    $(this).parent(".spec_group").remove();
});

Answer 1

$(this).parents(".spec_group").remove();
因为并不是直接的父级节点，需要用寻找祖先节点的parents方法