按下表单重置按钮时删除 JavaScript 元素

deleting javascript element when form reset button pressed

本文关键字：删除 JavaScript 元素 按钮 表单      更新时间：2023-09-26

在javascript中，我有一个元素div，当HTML表单中出现错误时会弹出。问题是该元素在按下HTML表单中的重置按钮时不会消失。我希望它在按下重置按钮时消失，并且仅在表单中出现错误（即没有字段输入）时才出现。HTML 表单：

<form id="contact" action="" onsubmit="checkContactForm( this ); return false;">
  <p>Fill in the form below to send me a message!</p>    
  <p>
    <label for="firstname">First name:</label>
    <input name="firstname" id="firstname" onfocus="resetField( this );" />
  </p>
  <p>
    <label for="lastname">Last name:</label>
    <input name="lastname" id="lastname" onfocus="resetField( this );" />
  </p>
  <p>
    <label for="email">E-mail address:</label>
    <input name="email" id="email" onfocus="resetField( this );" />
  </p>
  <p>
    <label for="message">Your Message:</label>
    <textarea name="message" id="message" onfocus="resetField( this );"></textarea>
  </p>
  <p>
    <button type="submit">Send Message</button>
    <button type="reset">Reset Form</button>
  </p>
</form>

Javascript ：

function checkContactForm( theForm ) {
  for ( i in requiredFields ) {
       var fieldName = requiredFields[ i ];
       var theField = theForm[ fieldName ];
      if ( !theField.value || theField.value == "Error" ) {
        theField.style.color = "#f66";
        theField.value = "Error";
        var emptyFields = true;
      }
      if (!emptyFields) {
        theForm.submit();
      }
      else
      {
        var div = document.createElement ("div");
        div.id = "div";
        div.style.width = "400px";
        div.style.height = "20px";
        div.style.position = "absolute";
        div.style.marginTop = "-550px";
        div.style.marginLeft = "160px";
        div.style.fontStyle = "italic";
        div.style.padding = "10px 20px 10px 10px";
        div.style.background = "#D4D4D4";
        div.style.borderStyle = "Solid";
        div.style.borderColor = "#ff6666";
        div.style.boxShadow = "0px 2px 10px 0px";
        div.innerHTML = "Please fill in all fields before submitting the form";
        document.body.appendChild(div);
        /*$(div).fadeOut(5000);*/
      }
      if (  ) {
        div.parentNode.removeChild ("div");
      }
    }
  }
  function resetField( theField ) {
    if ( theField.value == "Error" || theField.value =="" ) {
    theField.value = "";
    theField.style.color = "#000";
  }
}

替代方案 - 与其使用 document.createElement（） 通过 javascript 创建 DIV，我建议将 DIV 的 HTML 放入页面中，使用 style="display：none;" 来最初隐藏它。 给div 一个 id，例如 id="errorDiv"。 想要显示错误消息时，请使用：

document.getElementById('errorDiv').style.display = 'block';

准备好隐藏邮件时，请使用：

document.getElementById('errorDiv').style.display = 'none';

试试这个：

document.getElementById("my-element").remove();
OR 
document.getElementsByClassName("my-elements").remove();

试试这个： 

function removeDummy() {
  var elem = document.getElementById('firstname');
  elem.parentNode.removeChild(elem);
}

参考这个 ： http://www.w3schools.com/js/js_htmldom_nodes.asp

相关文章：