Unable to hide element with html-CodePudding

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 >
        <label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" 
       maxlength="12" required id="id_mobile_number">
</div>
                
    <div >
         <label for="id_ported_number">Ported number:</label>: <input type="text" name="ported_number" 
          value="true" maxlength="100" id="id_ported_number">
    </div>
            

<div >
          <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 >
          <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
      }

CodePudding user response：

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 >
        <label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" 
       maxlength="12" required id="id_mobile_number">
</div>
                
<div >
     <label for="id_ported_number">Ported number:</label> <input type="text" name="ported_number" 
      value="true" maxlength="100" id="id_ported_number">
</div>
            

<div >
          <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 >
          <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 >
        <label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" 
       maxlength="12" required id="id_mobile_number">
</div>
                
<div >
     <label for="id_ported_number">Ported number:</label>: <input type="text" name="ported_number" 
      value="true" maxlength="100" id="id_ported_number">
</div>
            

<div >
          <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 >
          <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>

CodePudding user response：

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 >
        <label for="id_mobile_number">Mobile number::</label> <input type="text" name="mobile_number" 
       maxlength="12" required id="id_mobile_number">
</div>
                
    <div >
         <label for="id_ported_number">Ported number::</label> <input type="text" name="ported_number" 
          value="true" maxlength="100" id="id_ported_number">
    </div>
            

<div >
          <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 >
          <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>

CodePudding user response：

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)