What is the simplest way of hiding labels and inputs in a way that they do not affect the layout. See image and the code below. The label text3 is hidden and there is no extra gap between text2 and text4. In this implementation I put both in div
container and change its .style.display
property.
Edit: the figure is excactly what I want but the implementation is not good. In other words, how to rewrite the function (e.g. getting rid of div and using css...).
<html>
<body>
<script type="application/javascript">
function hideableLabelAndTextInput(divId, inputId, labelTxt){
// container
var hiderDiv = document.createElement('div');
hiderDiv.style.display = 'block';
hiderDiv.id = divId
// label
var newLabel = document.createElement('label');
newLabel.innerHTML = labelTxt;
// textBox
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.id = 'inputId';
// grouping
hiderDiv.appendChild(newLabel);
hiderDiv.appendChild(newTextBox);
return hiderDiv;
}
for (var i=0; i<10; i++){
elem = hideableLabelAndTextInput('div' + i, 'text' + i, 'text' + i);
document.body.appendChild(elem);
}
document.getElementById('div3').style.display = 'none';
document.getElementById('div6').style.display = 'none';
</script>
</body>
</html>
<div data-label="text1">Test 1</div>
\$\endgroup\$