Comment afficher - cacher le bouton basé sur si le bouton radio le plus proche est sélectionné?

Question

Supposons, j'ai deux questions quiz.Chaque question ont des boutons radio pour sélectionner la réponse et un bouton de réponse claire pour effacer la réponse. Le bouton d'effacement cache/affiche uniquement lorsque la réponse est sélectionnée/désélectionnée dans son bloc de questions respectif.

Comment trouver si le bouton radio sélectionné/désélectionné est du bloc de questions le plus proche et afficher/masquer le bouton d'effacement en conséquence?

Et, voici le code JS J'utilise actuellement

jQuery(function($) { 

if ($("input[type]").is(":radio")) { 
    $(".answer").append("<button type='button' name='clear' >Clear</button>"); 
} 

if ($("input[type=radio]:checked").length > 0) { 
    $('button[name=clear]').show(); 
} 
else{ 
    $('button[name=clear]').hide(); 
    } 


$("input[type=radio]").on('click', function() { 
    $nearest= $(this).closest('.answer').find('button[name=clear]'); 
    $nearest.show(); 
}); 

$('button[name=clear]').on('click', function() { 
    $(this).closest('.answer').find(':radio').prop('checked', false); 
    $(this).hide(); 
}); 

if ($('.content').parent().hasClass("deferredfeedback")) { 
    if ($('.answer .r0 input').prop('disabled')) { 
     $("button[name=clear]").remove(); 
    } 
} else { 
    if (!($('div.im-controls').length)) { 
     $("button[name=clear]").remove(); 
    } 
} 

}); 

quelque part que je suis absent quelque chose que je ne suis pas en mesure de savoir, quelqu'un peut-il me guider à ce sujet?

Answer 1

Pourquoi ne pas avoir le bouton clair là-bas et le cacher

CSS

.clearButton { display:none} 

jQuery - contenant en supposant par réponse a la classe "réponse" et
bouton clair a la classe "clearButton":

$(function() { 
    $(".answer").on("click","input[type=radio]",function() { 
    $(this).closest(".answer").find(".clearButton").show(); 
    }); 
}); 

ou si les frères et sœurs:

$(function() { 
    $(".answer").on("click","input[type=radio]",function() { 
    $(this).siblings(".clearButton").show(); 
    }); 
}); 

Pour le clair, vous pouvez utiliser

$(".answer").on("click",".clearButton",function() { 
    $(this).siblings("input[type=radio]").prop("checked",false); 
    $(this).hide(); 
    }); 

Pour afficher le bouton clair onload si certaines radios sont déjà vérifiés:

$("[type=radio]:checked").trigger("click") 

$(function() { 
 
    $(".answer").on("click", "input[type=radio]", function() { 
 
    $(this).closest(".answer").find(".clearButton").show(); 
 
    }); 
 

 

 
    $(".answer").on("click", ".clearButton", function() { 
 
    $(this).siblings("input[type=radio]").prop("checked", false); 
 
    $(this).hide(); 
 
    }); 
 

 

 
    $("[type=radio]:checked").trigger("click") 
 

 
});

.clearButton { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="answer"> 
 
    <label><input type="radio" name="answer1" value="1">Answer 1</label> 
 
    <label><input type="radio" name="answer1" value="2">Answer 2</label> 
 
    <label><input type="radio" name="answer1" value="3">Answer 3</label> 
 
    <button type="button" class="clearButton">Clear</button> 
 
</div> 
 
<hr/> 
 
<div class="answer"> 
 
    <label><input type="radio" name="answer2" value="1">Answer 1</label> 
 
    <label><input type="radio" name="answer2" value="2" checked>Answer 2</label> 
 
    <label><input type="radio" name="answer2" value="3">Answer 3</label> 
 
    <button type="button" class="clearButton">Clear</button> 
 
</div>

Answer 2

Essayez ci-dessous le code

code Js ici

jQuery(function($) { 
    $("button").hide(); 
    $("input[type='radio']:checked").each(function(e){ 
     $(this).closest('.answers').find("button").show(); 
    }); 
    $("body").on("change","input[type='radio']" ,function(){ 
    $(this).closest('.answers').find("button").show(); 
    }); 

    $("body").on("click","button" ,function(){ 
    $(this).closest('.answers').find("input[type='radio']:checked").prop("checked",false); 
    $(this).hide(); 
    }); 
}) 

click here to show jsFiddle demo