I'm trying to hide a radio button when another button is selected. I managed to hide the actual button but I can't find a way to hide the label/ name. This code below only hides the button.
document.getElementById('lights').style.display = 'none';
Code below is the actual button. I even trid putting the name in label tags.
Lights
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="lights" />
You can add the "lights" word inside a label or a span then use "previousElementSibling" to hide it.
const radioBtn = document.getElementById('lights');
radioBtn.style.display = 'none';
radioBtn.previousElementSibling.style.display = 'none';<span>Lights</span>
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="lights" />A better usability pattern would deemphasize it visually. Listen for clicks to the parent element and set a CSS class. Target the radio group's :checked attribute. Apply a style to the + next element, a label with a for= attribute.
let selector = "fieldset";
let parent = document.querySelector(selector);
parent.onclick = function(event) {
let element = event.target;
// if click child, deemphasize
if (element.nodeName.toLowerCase() != selector) {
element.closest(selector).classList.add("taint");
}
}.taint {
border: 0.125em dotted red;
}
.taint input[type=radio]:not(:checked)+label {
opacity: 0.25;
}<fieldset>
<input type="radio" name="hue" id="light" /><label for="light">Light</label>
<input type="radio" name="hue" id="dark" /><label for="dark">Dark</label>
</fieldset>