Question

txtAgeBlur函数中的最后一行出现问题。为什么我不能像这样删除子节点？

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Forms</title>
</head>
<body>
  <form action="" name="form1">
    <p>
      Name
      <input type="text" name="txtName">
    </p>
    <p>
      Age
      <input type="text" name="txtAge" size="3" maxlength="3">	
    </p>
    <p>
      <input type="button" value="Check details" name="btnCheckForm">
    </p>
  </form>

  <script>
    var myForm = document.form1;

    function btnCheckFormClick(e) {
      var name = myForm.txtName.value;
      var age = myForm.txtAge.value;

      if (name === "" || age === "") {
        alert("Please complete all of the form");

        if (name === "")
          myForm.txtName.focus();
        else
          myForm.txtAge.focus();
      }
      else
        alert("Thanks for completing the form " + name);
    }

    var messageInserted = false;

    function txtAgeBlur(e) {
      //console.log(e.type);
      var target = e.target;
      var msg = document.createElement("span");
      msg.id = "msg";
      msg.appendChild(document.createTextNode("Please enter a valid age"));

      if (isNaN(target.value)) {
        if (!messageInserted) {
          messageInserted = true;
          target.parentElement.appendChild(msg);
        }
        target.focus();
        target.select();
      }
      else if (messageInserted === true)
        document.getElementsByTagName("p")[1].removeChild(msg); //problem
    }

    myForm.btnCheckForm.addEventListener("click", btnCheckFormClick);
    myForm.txtAge.addEventListener("blur", txtAgeBlur);
  </script>
</body>
</html>

＆＃13;

但是，这会删除子元素而没有任何问题。这与上面的例子有什么区别？

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Forms</title>
</head>
<body>
  <script>
    var msg = document.createElement("span");
    msg.appendChild(document.createTextNode("Please enter a valid age"));
    document.body.appendChild(msg);

    var msg2 = document.querySelector("span");
    console.log(msg === msg2);
    document.body.removeChild(msg);
  </script>
</body>
</html>

＆＃13;

Answer 1

每次调用txtAgeBlur时，您都会使用<span>创建一个新的msg。当您尝试删除当前显示的消息时，msg会引用尚未插入的新<span>。您需要获取对当前显示消息的引用以将其删除。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Forms</title>
</head>
<body>
  <form action="" name="form1">
    <p>
      Name
      <input type="text" name="txtName">
    </p>
    <p>
      Age
      <input type="text" name="txtAge" size="3" maxlength="3">	
    </p>
    <p>
      <input type="button" value="Check details" name="btnCheckForm">
    </p>
  </form>

  <script>
    var myForm = document.form1;

    function btnCheckFormClick(e) {
      var name = myForm.txtName.value;
      var age = myForm.txtAge.value;

      if (name === "" || age === "") {
        alert("Please complete all of the form");

        if (name === "")
          myForm.txtName.focus();
        else
          myForm.txtAge.focus();
      }
      else
        alert("Thanks for completing the form " + name);
    }

    var messageInserted = false;

    function txtAgeBlur(e) {
      //console.log(e.type);
      var target = e.target;
      if (isNaN(target.value)) {
        if (!messageInserted) {
          //There is no reason to do the work of creating the <span> if you are not
          //  going to be inserting it.  Thus, you should create it here, not
          //  every time you call txtAgeBlur.
          var msg = document.createElement("span");
          msg.id = "msg";
          msg.appendChild(document.createTextNode("Please enter a valid age"));

          messageInserted = true;
          target.parentElement.appendChild(msg);
        }
        target.focus();
        target.select();
      } else if (messageInserted === true){
        //When you get here, msg is a NEW span that has not been inserted.  Thus,
        //  you do not remove the span that has never been inserted.
        //document.getElementsByTagName("p")[1].removeChild(msg); //problem
        //You need to get a reference to the span you have already inserted.
        var currentMessage = document.getElementById('msg');
        currentMessage.parentNode.removeChild(currentMessage);
        //The user may change age back to NaN and need the message re-inserted.
        messageInserted = false;
      }
    }

    myForm.btnCheckForm.addEventListener("click", btnCheckFormClick);
    myForm.txtAge.addEventListener("blur", txtAgeBlur);
  </script>
</body>
</html>

为什么删除这样的子元素并不起作用？

1 个答案: