1

i am trying to hide the all input field, its label, and its icon element if the content of inputs value are empty, i know how to hide all inputs with empty values using css : input:not([value]){ display:none; } but i cant hide the label and icons of those inputs field that are empty together as well

this is what tried by using javascript but not sure if is the right away of doing cause i am new to javascript

<script>


    function hey(){
    var label = document.getElementById("1");
    var input = document.getElementById("2").value;
    var icon = document.getElementById("3");

        if (input === "") {
document.getElementById("1").style.display = "none";
document.getElementById("2").style.display = "none";
document.getElementById("3").style.display = "none";
}

      
</script>  

  <label  id="1"><b>Card title</b></label> 
            
  <input type="text" id="2" placeholder="Enter a name for this card" value=""  class="form-control label"   name="title" required> 
            
  <i id="3" class="fa-solid fa-file-signature hidel"></i>

</div>

i also thought about giving same class names for each group of labels, inputs and icons and then hiding those elements with same class name

document.getElementByclassname(".aclassname").style.display = "none";

but it doesnt work either

Marcos Almeida
  • 9
  • 4
  • There is no `getElementByclassname`. There is `getElementsByClassName` https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return – epascarello Jul 12 '23 at 16:32

2 Answers2

0

There are many solutions for this.

For my answer, I group my form fields together in a div. So I wrapped your input in a div called formGroup. I also created a new css class called hide.

Instead of hiding each separate object, I jus grab the input element's parent node and toggle class called hide. That way the entire group will be hidden.

const btn = document.querySelector(".btn");
btn.addEventListener("click", hey)

function hey(ev) {
  const input = document.getElementById("2");
  input.parentNode.classList.toggle("hide",(input.value == ""))
}
.formGroup.hide{display:none;}
<div class="formGroup">
  <label id="1"><b>Card title</b></label>

  <input type="text" id="2" placeholder="Enter a name for this card" value="" class="form-control label" name="title" required>

  <i id="3" class="fa-solid fa-file-signature hidel"></i>

</div>

<button class="btn">TEST</button>
imvain2
  • 15,480
  • 1
  • 16
  • 21
  • do i have to create a different form group name for each set of labels, inputs, and icon,or the same div class formGroup name for every set of input? – Marcos Almeida Jul 12 '23 at 21:52
  • @MarcosAlmeida yes you would need to group them together and have a form group for each set which is a common structure. There are other solutions too, I just haven't seen enough of your HTML to create a different one – imvain2 Jul 12 '23 at 22:01
0

With .style on plain .getElementById method you can only read inline styles of an element as mentioned in the answer here: https://stackoverflow.com/a/52345935/19119712

What you can do instead is use the Window.getComputedStyle()method to get hold of CSS properties of an element (it returns an object).

Basically, all you've got to do is the following:

const label = document.querySelector("label");
const compStyles = window.getComputedStyle(label);

You can then make use of compStyles to get hold of specific style properties and manipulate those. Good luck!

Note: Repeat the same process with the other elements. Also, I am not quite sure whether it'll work with document.getElementById but you can give it a try. Ideally, it should work and if you head into any problems refer the docs I linked above.

Suryasish Paul
  • 399
  • 2
  • 12