var addText = document.getElementById("addText")
// 查找addText里的所有input
var inputs = addText.getElementsByTagName('input')
if (inputs.length) { // 如果addText里有input的话
// 提取最后一个input
var input = inputs[inputs.length - 1]
// 获取父节点，也就是div
var div = input.parentNode
// 删除div节点
div.parentNode.removeChild(div)
}
},
这样写试试
<html><head>
<title>js动态的在页面上增加或删除一个文本框</title>
<script type="text/javascript">
<!--
var textNumber = 1
function addTextBox(form, afterElement) {
// Increment the textbox number
textNumber++
// Create the label
var p = document.createElement("p")
p.id="txt"+textNumber
var label = document.createElement("label")
// Create the textbox
var textField = document.createElement("input")
textField.setAttribute("type","text")
textField.setAttribute("name","biaozhundaan"+textNumber)
textField.setAttribute("id","biaozhundaan"+textNumber)
// Add the label's text
label.appendChild(document.createTextNode("第"+textNumber+"空: "))
// Put the textbox inside(里面)的//把文本框放进去
label.appendChild(textField)
// Add it all to the form fengshu
p.appendChild(label)
var label = document.createElement("label")
// Create the textbox
var textField = document.createElement("input")
textField.setAttribute("type","text")
textField.setAttribute("name","pingfengA"+textNumber)
textField.setAttribute("id","pingfengA"+textNumber)
// Add the label's text
label.appendChild(document.createTextNode("评分词"+textNumber+": "))
// Put the textbox inside(里面)的//把文本框放进去
label.appendChild(textField)
// Add it all to the form
p.appendChild(label)
var label = document.createElement("label")
// Create the textbox
var textField = document.createElement("input")
textField.setAttribute("type","text")
textField.setAttribute("name","fengshu"+textNumber)
textField.setAttribute("id","fengshu"+textNumber)
// Add the label's text
label.appendChild(document.createTextNode("分数"+textNumber+": "))
// Put the textbox inside(里面)的//把文本框放进去
label.appendChild(textField)
// Add it all to the form
//
p.appendChild(label)
form.insertBefore(p,afterElement)
return false
}
function removeTextBox(form) {
if (textNumber > 1) { // If there's more than one text box
// Remove the last one added
form.removeChild(document.getElementById("txt"+textNumber))
textNumber--
}
}
//-->
</script>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1a: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" onClick="addTextBox(this.form,this.parentNode) " />
<input type="button" value="Remove Textbox" onClick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
总结下来就是dom节点的读/写、添加/删除，请看下面的例子。<!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"/>
<title></title>
<script type="text/javascript">
var selectLi
//定义变量，保存修改了的标签
var editedLi=false
window.onload=function()
{
//新增li标签到末尾
document.getElementById("insertEnd").onclick = insertEndclick
//新增li标签到指定位置
var liObj=document.getElementsByTagName("li")
for(var i=0i<liObj.lengthi++)
{
liObj[i].onclick = liChoose
}
document.getElementById("insert").onclick = insertThere
//删除指定标签
document.getElementById("delete").onclick = deleteli
//修改指定标签内容
document.getElementById("edit").onclick = editLi
//将选中的该标签变为文本框进行内容修改
document.getElementById("edit2").onclick = editLi2
//将文本框中的内容保存
document.getElementById("save").onclick = saveLi
}
//新增li标签到末尾
function insertEndclick()
{
var result = prompt("需要插入的li标签文本：", "小黑")
if (result)
{
var newli = document.createElement("li")
newli.innerHTML = result
newli.onclick = liChoose
document.getElementById("ulList").appendChild(newli)
}
}
//新增li标签到指定位置
function insertThere()
{
if (selectLi)
{
var result = prompt("需要插入的li标签文本：", "小黑")
if (result) {
var newli = document.createElement("li")
newli.innerHTML = result
//需要给新增的li标签设置点击事件
newli.onclick = liChoose
document.getElementById("ulList").insertBefore(newli, selectLi)
}
}
else
{
alert("请先选择要插入的位置")
}
}
//高亮选中的标签
function liChoose()
{
var ul = document.getElementsByTagName("li")
for (var i = 0i <ul.lengthi++)
{
ul[i].style.backgroundColor = "white"
}
this.style.backgroundColor = "yellow"
selectLi = this
}
//删除指定标签
function deleteli()
{
if (selectLi)
{
selectLi.parentElement.removeChild(selectLi)
}
else
{
alert("请先选中要删除的标签")
}
}
//修改指定标签
function editLi()
{
if(selectLi)
{
var result = prompt("输入修改内容", "大白")
if(result)
{
selectLi.innerHTML = result
}
}
else
{
alert("请选择要修改的标签")
}
}
//将选中的该标签变为文本框进行内容修改
function editLi2()
{
if(selectLi)
{
//创建一个文本框
var newli = document.createElement("input")
newli.type = "text"
//将文本框内容设置为li标签的文本值
newli.value = selectLi.innerHTML
//将文本框添加到li标签内部
selectLi.removeChild(selectLi.childNodes[0])
selectLi.appendChild(newli)
editedLi = true
}
}
//将文本框中的内容保存
function saveLi()
{
if (editedLi)
{
var editValue = selectLi.childNodes[0].value
selectLi.innerHTML = editValue
}
else
{
alert("没有标签在编辑状态")
}
}
</script>
</head>
<body>
<div>
<input type="button" id="insertEnd" value="新增到末尾" />
<input type="button" id="insert" value="新增到指定位置" />
<input type="button" id="delete" value="删除" />
<input type="button" id="edit" value="修改" />
<input type="button" id="edit2" value="将选中标签变为文本标签进行修改" />
<input type="button" id="save" value="保存" />
</div>
<ul id="ulList">
<li>小猫</li>
<li>小鱼</li>
<li>小狗</li>
<li>大象</li>
<li>树懒</li>
</ul>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）