HTML/JavaScriptのユーザー選択に基づいてフォーム要素を動的に削除する

Question

[いいえ]ラジオボタンの選択時にファイルをアップロードするオプションを削除しようとしていますが、[いいえ]をクリックしても表示されません。 JavaScriptについて私が何をしているのか分かりません。どのように私はそれを離れて行く（または戻ってくる）。

<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()"> 
     <input type="submit" value="Submit" /><br> 
     <label for="fname">First Name:</label> 
     <input type="text" required /><br> 
     <label for="lname">Last Name:</label> 
     <input class="lname" type="text" required/><br> 
     <label for="email">Email:</label> 
     <input class="email" type="text" required/><br> 
     <input type="radio" name="file" value="yes" id="yes" /> 
     <label for="Yes">Yes</label> 
     <input type="radio" name="file" value="no" id="no" /> 
     <label for="No" "removeElement();">No</label><br> 
     <p><input type="file" size="30" required></p> 
     </form> 

     <script> 
      function validateForm() { 
       window.open("https://www.stackoverflow.com"); 
      } 

      function removeElement(){ 
       var parent = document.getId(file); 
       parent.removeChild(file); 
      } 
     </script> 

ご協力いただければ幸いです。非表示のための

Answer 1

あなただけのhtmlタグの真ん中にremoveElement();を置くことはできません。

ファイルタグを非表示にしたいとしますか？まず、requiredを削除します。

あなたは、これは、あなたが純粋なJavaScriptを探しているなら部分的にthis source

に触発され、この

$('#no').change(
    function() { 
     if ($(this).is(':checked') && $(this).val() == 'no') { 
      $(this).hide(); //Change this for the id of the element you want 
     } 
     else { 
      $(this).show(); //Change this for the id of the element you want 
     } 
    }); 

のように見えるjQueryのではあなたの番に

をイベントリスナーを追加する必要があります私のソリューションは次のようになります：

<form method="post" enctype="multipart/form-data" onsubmit="return validateForm()"> 
<input type="submit" value="Submit" /><br> 
<label for="fname">First Name:</label> 
<input type="text" required /><br> 
<label for="lname">Last Name:</label> 
<input class="lname" type="text" required/><br> 
<label for="email">Email:</label> 
<input class="email" type="text" required/><br> 
<input type="radio" name="file" value="yes" id="yes" onclick="handleChange(false);" /> 
<label for="Yes">Yes</label> 
<input type="radio" name="file" value="no" id="no" onclick="handleChange(true);" /> 
<label for="No">No</label><br> 
<p><input type="file" size="30" id="fileUpload"></p> 
</form> 

<script> 
    function validateForm() { 
     window.open("https://www.stackoverflow.com"); 
    } 

    function handleChange(remove) { 
     var element = document.getElementById('fileUpload'); 
     if (remove) 
      element.style.display = 'none'; 
     else 
      element.style.display = 'block'; 
    } 

</script> 

テスト済み）

Answer 2

：

document.querySelectorAll('input[type=file]').style.display = 'none'; 

ショーのために：

document.querySelectorAll('input[type=file]').style.display = 'block'; //or ''