动态移除输入/ DOM错误
Dynamically Removing Inputs / DOM Error
我已经能够在一个按钮点击时动态地添加一层输入。这个新的div被附加在前一个div之后,我正在尝试创建一个按钮,如果用户不需要它,它也可以删除层。
我的问题是我似乎不能删除div。我可以添加,但不能删除。当我查看DOM时,我可以看到当addDiv按钮被单击时,它确实添加了div,并且所有内容都在div中,因此它被正确添加。但是,当我试图从它的父元素中删除新添加的div时,会抛出以下错误:
addJob.js:18 Uncaught TypeError: Cannot read property 'parentNode' of undefinedremoveJob @ addJob.js:18onclick @ index.html:1
我不确定如何使我的removeJob()
函数以与添加方式相反的方式定义。
CodePen: http://codepen.io/theodore_steiner/pen/WGEmGr
var i = 0;
function addJob() {
if (i <= 1) {
i++;
var div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_' + i + '"> '+
'<input type="text" class="three-lines" name="position_' + i + '"> '+
'<input type="text" class="three-lines" name="years_' + i + '">'+
'<input type="button" value="-" onclick="removeJob()">';
document.getElementById("employmentHistory").appendChild(div);
}
}
function removeJob(div) {
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
button {
height: 20px;
width: 20px;
background: none;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 25px;
}
input[type="button"] {
height: 20px;
width: 20px;
background: none;
border: 1px solid #ccc;
outline: none;
margin-left: 20px;
}
input[type="button"]:focus {
outline: none;
}
input.three-lines {
margin-left: 18px;
background: none;
border: none;
border-bottom: 1px solid #b3c1cc;
width: 150px;
margin-bottom: 30px;
}
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
你的函数是正确的,只要在onclick属性中添加参数"this",如下所示:
onclick="removeJob(this)"
那么,根据下面的讨论,在参数中传递 this
是实现此目的的最佳方法。
var i = 0;
var div = null;
function addJob()
{
if(i <= 1)
{
i++;
div = document.createElement("div");
div.innerHTML = '<input type="text" class="three-lines" name="schoolBoard_'+i+'"> <input type="text" class="three-lines" name="position_'+i+'"> <input type="text" class="three-lines" name="years_'+i+'"><input type="button" value="-" onclick="removeJob(this)">';
document.getElementById("employmentHistory").appendChild(div);
}
}
function removeJob(div)
{
document.getElementById("employmentHistory").removeChild(div.parentNode);
i--;
};
button
{
height: 20px;
width: 20px;
background: none;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 25px;
}
input[type="button"]
{
height: 20px;
width: 20px;
background: none;
border: 1px solid #ccc;
outline: none;
margin-left: 20px;
}
input[type="button"]:focus
{
outline: none;
}
input.three-lines
{
margin-left: 18px;
background: none;
border: none;
border-bottom: 1px solid #b3c1cc;
width: 150px;
margin-bottom: 30px;
}
<div id="page2-content">
<div class="input-group" id="previousTeachingExperience">
<label id="teachingExpierience">Teaching Experience *</label>
<div id="employmentHistory">
<input type="text" class="three-lines" name="schoolBoard_1" placeholder="School Board" onblur="this.placeholder='Email'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="position_1" placeholder="Position" onblur="this.placeholder='Position'" onfocus="this.placeholder=''" />
<input type="text" class="three-lines" name="years_1" />
<input type="button" name="myButton" onclick="addJob()" value="+" />
</div>
希望这将帮助你:)
相关文章:
- 使用jquery创建dom元素会导致ie9出现拒绝访问错误
- 如何定位DOM怪物错误
- d3在数据更新时错误地附加了dom元素
- 未捕获错误:元素缓存中id为x的DOM元素与DOM中的元素不同
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 未捕获错误:INVALID_STATE_ERR:DOM异常11
- 创建节点时出现 Javascript DOM 错误
- DOM插入的简单javascript错误
- HTML5音频DOM异常11错误,currentTime=0
- 未捕获错误:NOT_FOUND_ERR:appendChild调用的DOM异常8
- DOM 绑定错误:未定义侦听器方法
- 解释 DOM 11 在初始化 XMLHttpRequest 时出现 JSON 标头的错误
- 使用 Jquery 将意外令牌非法附加到 DOM 元素时出现错误消息
- 在循环中使用 DOM 时:未捕获的类型错误:无法读取空错误的属性“已检查”
- 将 JSON 数据导入 DOM 错误
- ReactJS:Dom 渲染顺序错误
- 木偶嵌套布局视图未呈现,显示错误“元素必须存在于 DOM 中”
- Internet Explorer中的JavaScript DOM错误
- 仅在Safari 9.0中Ajax调用中的DOM错误
- 动态移除输入/ DOM错误