无法用html隐藏元素

Question

我需要在item类的某些字段中隐藏或使某些字段完全隐藏。我试过使用jquery, javascript和HTML，但结果不是太好。

<div class="item">
<label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" 
maxlength="12" required id="id_mobile_number">
</div>

<div class="item">
<label for="id_ported_number">Ported number:</label>: <input type="text" name="ported_number" 
value="true" maxlength="100" id="id_ported_number">
</div>

<div class="item">
<label for="id_idplan">Idplan:</label>: <select name="idplan" required id="id_idplan">
<option value="" selected>---------</option>
<option value="1">500 at 150 for 1month</option>
</select>
</div>
<div class="item">
<label for="id_user">User:</label>: 
<select name="user" id="id_user">
<option value="">---------</option>
<option value="2">[e-mail]</option>
<option value="3">[e-mail]</option>
</select>
</div>    



Am trying to make some fields invisible or completely hidden with html but the result only hide only the input field or text property while the name of the html element still shows on the form.
I want those field or element mark hidden to be completely hidden or completely invisible.
users should not be able to know that there was supposed to be an item there.

检查我的代码

i tried using javascript and only the input field is hidden while the form name and size and other still display
<script type="text/javascript">
var net = document.getElementById('id_idnetwork');
net.style.display = 'hidden';



</script>

我尝试使用html，但只有输入是隐藏的，而名称和其他属性显示我正在使用HTML id来获取这个字段。

#id_user {
position: absolute;
display: none
}
#id_idplan {
position: absolute;
display: none
}

Answer 1

你可以隐藏兄弟姐妹:

[for="id_user"],
[for="id_user"] ~ * /* hide siblings */
{
position: absolute;
display: none
}
[for="id_idplan"],
[for="id_idplan"] ~ * /* hide siblings */
{
position: absolute;
display: none
}

<div class="item">
<label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" 
maxlength="12" required id="id_mobile_number">
</div>

<div class="item">
<label for="id_ported_number">Ported number:</label> <input type="text" name="ported_number" 
value="true" maxlength="100" id="id_ported_number">
</div>

<div class="item">
<label for="id_idplan">Idplan:</label> <select name="idplan" required id="id_idplan">
<option value="" selected>---------</option>
<option value="1">500 at 150 for 1month</option>
</select>
</div>
<div class="item">
<label for="id_user">User:</label> 
<select name="user" id="id_user">
<option value="">---------</option>
<option value="2">[e-mail]</option>
<option value="3">[e-mail]</option>
</select>
</div>

或者更好的方法是为.item元素添加额外的类，这样您就可以控制它了:

.item4 {
position: absolute;
display: none;
}
.item3 {
position: absolute;
display: none;
}

<div class="item item1">
<label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" 
maxlength="12" required id="id_mobile_number">
</div>

<div class="item item2">
<label for="id_ported_number">Ported number:</label>: <input type="text" name="ported_number" 
value="true" maxlength="100" id="id_ported_number">
</div>

<div class="item item3">
<label for="id_idplan">Idplan:</label>: <select name="idplan" required id="id_idplan">
<option value="" selected>---------</option>
<option value="1">500 at 150 for 1month</option>
</select>
</div>
<div class="item item4">
<label for="id_user">User:</label>: 
<select name="user" id="id_user">
<option value="">---------</option>
<option value="2">[e-mail]</option>
<option value="3">[e-mail]</option>
</select>
</div>

Answer 2

也许像这样??

#id_user {
position: absolute;
display: none
}


#id_idplan {
position: absolute;
display: none
}
label#hide_user {display:none;}
select#hide_user {display:none;}

<div class="item">
<label for="id_mobile_number">Mobile number::</label> <input type="text" name="mobile_number" 
maxlength="12" required id="id_mobile_number">
</div>

<div class="item">
<label for="id_ported_number">Ported number::</label> <input type="text" name="ported_number" 
value="true" maxlength="100" id="id_ported_number">
</div>

<div class="item">
<label id="hide_user" for="id_idplan">Idplan::</label> <select id="hide_user" name="idplan" required id="id_idplan">
<option value="" selected>---------</option>
<option value="1">500 at 150 for 1month</option>
</select>
</div>
<div class="item">
<label id="hide_user" for="id_user">User:: </label>
<select name="user" id="id_user">
<option value="">---------</option>
<option value="2">[e-mail]</option>
<option value="3">[e-mail]</option>
</select>
</div>

Answer 3

自从HTML5发布以来，人们现在可以简单地做:

<div hidden>This div is hidden</div>

注意:一些旧的浏览器不支持此功能，尤其是IE <11 .

隐藏属性文档(MDN,W3C)