基於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

你不能只是把removeElement();在html標籤的中間。

我假設你想隱藏文件標籤？你首先要刪除required。

您需要在您的號

添加事件偵聽器在jQuery中，這看起來像這樣

$('#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 
     } 
    }); 

通過this source

如果您正在尋找純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" 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> 

（Not測試）

Answer 2

爲隱藏：

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

作秀：

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