原生js删除html,原生js模拟v-for增加删除.html

.input-list{

border:1px dashed #F00;

margin-top:10px;

}

.input-box{

margin-bottom: 5%;margin-right: 30%;

}

添加

var arr=[

{value1:'',value2:'',value3:''},

]

renderData()

document.getElementById("add").οnclick=function(){

getValueData()

arr.push({title1:'文案背景：',value1:'',title2:'文案标题：',value2:'',title3:'文案内容：',value3:''})

renderData()

}

function deleteItem(e){

getValueData()

var index= parseInt(e.getAttribute('data-id'))

if(arr.length<2){

return

}else{

arr.splice(index,1)

renderData()

}

}

function getValueData(){

document.querySelectorAll(".input-list").forEach(function(el,index) {

el.querySelectorAll(".input-box").forEach(function(elchild,indexchild) {

arr[index]['value'+(indexchild+1)]=elchild.querySelector("input").value

})

})

}

function renderData(){

var htmlString=''

for (var i = 0; i < arr.length; i++) {

htmlString+='

\

删除\

\

文案背景：\

\

\

\

文案标题：\

\

\

\

文案内容：\

\

\

'

}

document.querySelector('.box').innerHTML = htmlString

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史