原生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

原始数据

按行查看

历史

原生js删除html,原生js模拟v-for增加删除.html相关推荐

Linux shell 用sed删除第一行、最后一行或增加删除某行
1.删除文档的第一行 sed -i '1d' <file> 2.删除文档的最后一行 sed -i '$d' <file> 3.在文档指定行中增加一行例如文档如下: echo ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
原生js获取document_【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素
作者:valentinogagliardi 译者:前端小智来源:github 这几天自己的公众号无套路送现金 200+,参与方式如下 OKR 与 KPI 的区别(文中无套路送现金 200+) 文档对 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
React Native实现js调用安卓原生代码
1 问题实现js调用安卓原始代码,直接上代码,简单粗暴 2 代码实现 1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下 pub ...
JS与APP原生控件交互
"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
原生遍历_前端原生写js代码还是用vue等框架写项目？
其实对于初入前端的同学来说,我个人推荐写原生.因为扎实的js基础是通过写原生代码逐步理解js的数据类型,语法,闭包,原型链,继承等知识,只有在项目中主动应用这些js的基本知识,才能逐步提高你的编码能力 ...
React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然 ...
php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用:xvDate( ...

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

原生js删除html,原生js模拟v-for增加删除.html相关推荐

最新文章

热门文章