Unable to hide element with html

Question

I need to hide or to make some field completely hidden in some field in the item class. i have tried using jquery, javascript and html but the result is not too good.

<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">[email protected]</option>
           <option value="3">[email protected]</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.

check my code

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>

I tried using html but only the input is hidden while the name and other property shows am using html id to get this field.

#id_user {
        position: absolute;
        display: none

      }
      #id_idplan {

        position: absolute;
        display: none
      }

Answer 1

You can hide siblings:

[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">[email protected]</option>
           <option value="3">[email protected]</option>
          </select>
</div>

Or much better way is to add additional classes to the .item elements, so you can control it instead:

.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">[email protected]</option>
           <option value="3">[email protected]</option>
          </select>
</div>

Answer 2

Maybe like this??

#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">[email protected]</option>
           <option value="3">[email protected]</option>
          </select>
</div>

Answer 3

Since the release of HTML5 one can now simply do:

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

Note: This is not supported by some old browsers, most notably IE < 11.

Hidden Attribute Documentation (MDN,W3C)