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">
</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>最佳答案
每次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>关于javascript - 为什么像这样删除子元素不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39488101/