基于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 ''