input 中输入内容，通过按钮点击添加列表，并可以删除
<body>
<div>
<input type="text" >
<button>提交</button>
</div>
<script>
// 可做删除的添加方法一，字符串拼接（ 优化前 ）
var inp = document.querySelector( 'input' )
var btn = document.querySelector( 'button' )
var ul = document.createElement( 'ul' )
document.body.appendChild( ul ) //将 ul 添加到 body 中
btn.onclick = function (){
// console.log( 11111111111 ) // 调试作用
var li = document.createElement( 'li' )
li.innerHTML = '<span>' + inp.value + '</span>' + '<button class = "del">x</button>'
inp.value = ''
ul.appendChild( li )
var del = document.querySelectorAll( '.del' )
for( var i = 0 ; i < del.length ; i++ ){
del[i].onclick = function(){
console.log( this.previousElementSibling.innerHTML )
this.parentNode.parentNode.removeChild( this.parentNode )
}
}
}
// 可做删除的添加方法二（ 优化后 ）
var inp = document.querySelector( 'input' )
var btn = document.querySelector( 'button' )
var ul = document.createElement( 'ul' )
document.body.appendChild( ul ) //将 ul 添加到 body 中
btn.onclick = function (){
// console.log( 11111111111 ) // 调试作用
var li = document.createElement( 'li' )
var span = document.createElement( 'span' )
var btn2 = document.createElement( 'button' )
li.appendChild( span )
li.appendChild( btn2 )
span.innerHTML = inp.value
btn2.innerHTML = 'x'
inp.value = ''
ul.appendChild( li )
btn2.onclick = function (){
this.parentNode.parentNode.removeChild( this.parentNode )
}
}
</script>
</body>
本文标题：input 中输入内容，通过按钮点击添加列表，并可以删除
本文链接：https://www.haomeiwen.com/subject/vqnaectx.html
网友评论