无法使用 html 隐藏元素

Question

我需要在项目 class 的某些字段中隐藏或完全隐藏某些字段。我试过使用 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">akpsr@gmail.com</option>
           <option value="3">abi@gmail.com</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

自 HTML5 发布以来，现在可以简单地做到：

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

注意：这不是某些旧浏览器的 supported，尤其是 IE < 11。

隐藏属性文档(MDN,W3C)

Answer 2

您可以隐藏兄弟姐妹：

[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">akpsr@gmail.com</option>
           <option value="3">abi@gmail.com</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">akpsr@gmail.com</option>
           <option value="3">abi@gmail.com</option>
          </select>
</div>

Answer 3

大概是这样的？？

#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">akpsr@gmail.com</option>
           <option value="3">abi@gmail.com</option>
          </select>
</div>

无法使用 html 隐藏元素

Unable to hide element with html

html

javascript

css

jquery

frontend