如何通过id为fe3739的元素隐藏包含标题与选项的完整表单问题?
如何通过id为fe3739的元素隐藏包含标题与选项的完整表单问题?
嗨,我明白你的问题了——你想通过#fe3739这个ID把整个问题(包括标题和下拉选项)都隐藏,但现在只能藏起下拉框对吧?
这是因为#fe3739对应的只是页面里的<select>下拉元素本身,而问题标题是在独立的<label>标签里,它只是通过for属性和下拉框关联,并没有被包含在#fe3739的DOM结构里,所以直接隐藏#fe3739只会影响到下拉框,碰不到标题。
要实现隐藏整个问题的需求,我们可以通过#fe3739向上遍历DOM树,找到包含它和标题的最外层容器,再隐藏这个容器就行。这里有两种靠谱的写法:
最稳妥的通用写法(依赖容器的类名):
用jQuery的closest()方法,从#fe3739开始往上找第一个带有.form-element-layout类的父元素(这个类就是整个问题的外层容器),代码如下:$("#fe3739").closest(".form-element-layout").hide();这个方法的好处是就算后续表单元素的ID(比如
formElement64)变了,只要类名不变,代码依然能用。针对当前HTML结构的精准写法(依赖容器的ID):
如果你确定formElement64这个ID不会变,也可以直接通过父元素ID定位:$("#fe3739").parents("#formElement64").hide();
下面是完整的可运行示例,替换你原来的代码就能看到效果:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div class="row"> <div class="grid-layout-col"> <div class="layout-col col-sm-12 col-xs-12"> <div id="formElement64" class="field-style form-element-layout row"> <div style="text-align:left;" class="col-sm-12 col-xs-12"> <label class="elq-label " for="fe3739">How would you describe your data domain?</label> </div> <div class="col-sm-12 col-xs-12"> <div class="row"> <div class="col-xs-12"> <div class="field-control-wrapper"> <select class="item-select" id="fe3739" name="dropdownMenu17" style="width:100%;" data-value=""> <option value="">Please Select</option> <option value="Fraud & Risk">Fraud & Risk</option> <option value="Marketing">Marketing</option> <option value="Product">Product</option> <option value="Sales">Sales</option> <option value="Other">Other</option> </select> </div> </div> </div> </div> </div> </div> </div> </div> <script> // 用这个代码替换原来的$("#fe3739").hide(); $("#fe3739").closest(".form-element-layout").hide(); </script>
这样执行后,整个包含标题和下拉框的表单区块就会被完全隐藏,完美满足你的需求啦~
备注:内容来源于stack exchange,提问作者sk_nath
相关产品推荐
相关产品推荐

