Почему удаление дочернего элемента вроде этого не работает?

Существует проблема с последней строкой внутри функции txtAgeBlur. Почему я не могу удалить дочерний узел следующим образом?Почему удаление дочернего элемента вроде этого не работает?

<!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"> \t 
 
    </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>

Однако это удаляет дочерний элемент без каких-либо проблем. В чем разница между этим и приведенным выше примером?

<!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>

источник

2016-09-14 Peter

* МВП * ссылается на новый текстовый узел, который вы создали, а не предыдущий. Вы можете рассмотреть 'msg.parentNode.removeChild (msg)' во втором случае. – RobG

Почему они не то же самое? Во втором примере узел, назначенный переменной 'msg', кажется тем же самым узлом, который я создал с помощью' document.body.appendChild (msg); '. 'Console.log (msg === msg2);' сравнение возвращает 'true'. Почему в первом примере это не так? Я новичок, и я не могу понять разницу. – Peter

Функция txtAgeBlur вызывается каждый раз, когда вы покидаете поле возраста. Это означает, что во второй раз, когда вы его вызываете, переменная msg ссылается на новый текстовый индекс, как упоминал Роб, а не на текстовый узел в dom. Причина, по которой ваш второй пример работает, заключается в том, что переменная msg все еще ссылается на узел, который был вставлен в dom. –

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"> \t 
 
    </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>

источник

2016-09-14 10:57:42 Makyen

Спасибо большое, ребята, все ваши ответы помогли. Теперь я это понимаю. – Peter

@ Питер, я рад помочь. BTW: вы действительно не должны создавать '' каждый раз, когда вызывается txtAgeBlur'. Нет причин создавать '', если вы не собираетесь его вставлять. Когда это возможно, вам следует избегать ненужной работы в обработчике событий.Таким образом, '' должен быть создан только в 'if (! MessageInserted) {', где вы собираетесь добавить '' в 'target'. Таким образом, он создается только тогда, когда вы собираетесь его использовать. – Makyen

Спасибо за ваш совет. Я очень ценю это. – Peter

Почему удаление дочернего элемента вроде этого не работает?

ответ

Смежные вопросы