Javascript 用于在窗体上添加div的按钮
您好，我学习了代码，但我遇到了一个问题：我有一个包含一个或多个数字的表单，我喜欢按add_按钮多次组合的内容，我希望能够使用delete按钮删除div。。。 以下是我为那些有想法的人编写的代码：Javascript 用于在窗体上添加div的按钮,javascript,php,html,Javascript,Php,Html,您好，我学习了代码，但我遇到了一个问题：我有一个包含一个或多个数字的表单，我喜欢按add_按钮多次组合的内容，我希望能够使用delete按钮删除div。。。 以下是我为那些有想法的人编写的代码： <div class="w-full dis-none js-show-service"> <div class="wrap-input100 input100-select bg1"> <div class="wrap-input100 input
<div class="w-full dis-none js-show-service">
<div class="wrap-input100 input100-select bg1">
<div class="wrap-input100 input100-select bg1">
<span class="label-input100">Techno Garentie d'Origine *</span>
<div>
<select class="js-select2" id="select3" name="service">
<option value="Solaire">Solaire</option>
<option value="Hydro">Hydraulique</option>
<option value="Eolien">Eolienne</option>
<option value="BioMasse">BioMasse</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
<div class="wrap-input100 input100-select bg1">
<span class="label-input100">Provenance Garentie d'Origine *</span>
<div>
<select class="js-select2" id="select2" name="service">
<option value="europe">Europe</option>
<option value="allemagne">Allemagne</option>
<option value="autriche">Autriche</option>
<option value="belgique">Belgique</option>
<option value="chypre">Chypre</option>
<option value="croatie">Croatie</option>
<option value="danemark">Danemark</option>
<option value="espagne">Espagne</option>
<option value="estonie">Estonie</option>
<option value="finlande">Finlande</option>
<option value="France">France</option>
<option value="irlande">Irlande</option>
<option value="islande">Islande</option>
<option value="italie">Italie</option>
<option value="lituanie">Lituanie</option>
<option value="luxembourg">Luxembourg</option>
<option value="norvege">Norvege</option>
<option value="pays-bas">Pays-Bas</option>
<option value="republique-tcheque">Republique-Tcheque</option>
<option value="slovenie">Slovénie</option>
<option value="suede">Suède</option>
<option value="suisse">Suisse</option>
</select>
<div class="dropDownSelect2"></div>
</div>
</div>
<div class="wrap-contact100-form-range">
<span class="label-input100">Pourcentage D'energie Verte *</span>
<div class="contact100-form-range-value">
<span id="value-upper">50</span>%
<input type="text" name="from-value">
<input type="text" name="to-value">
</div>
<div class="contact100-form-range-bar">
<div id="filter-bar"></div>
</div>
</div>
<button class="suppr_button">-</button>
</div>
<button class="add_button">+</button>
</div>
原厂技术设备*
索莱尔
水螅
伊洛里安
生物标志
原产地*
欧洲
阿勒曼
奥特里奇
Belgique
切普雷
克罗地亚人
丹麦马克
埃斯帕涅
埃斯托尼
芬兰德
法国
爱尔兰
岛国
意大利
利图阿尼
卢森堡
诺维格
低地国家
奇奇共和国
斯洛维尼
苏德
瑞士
垂直能量喷泉*
50%
-
+
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
-您可以从我的示例中选取一个模板。我想我理解了这个问题，尽管它不是很清楚-可能您希望在单击
添加按钮时重复整个DIV（如问题中所示）及其所有内容，并在单击移除按钮时移除新添加的节点。原始代码的一个问题是使用了ID
属性，这些属性必须是唯一的，文档才能保持有效，Javascript函数才能按预期运行-因此，以下内容将ID替换为与您可能拥有的任何其他Javascript或css例程中需要说明的值相同的类名
在Javascript中，您可以使用node.cloneNode（true | false）
克隆一个节点，也可以选择克隆其所有内容。下面利用此功能，将事件侦听器分配给所有新创建的按钮，单击这些按钮后，将进一步复制/修改DOM
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Repeat DIV on button click</title>
<style>
.js-show-service{
margin:1rem auto;
border:1px solid red;
box-sizing:border-box;
padding:1rem;
}
.clone{
border:1px solid blue!important
}
input,button,select{padding:0.5rem}
button{min-width:10%;clear:none;float:none;margin:0.25rem;}
.clone:before{
content:attr(data-clone);
color:white;
background:black;
padding:0.5rem;
width:2rem;
height:2rem;
text-align:center;
margin:0;
left:-1rem;
top:-0.5rem;
position:relative;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',e=>{
let parent=document.body;
let i=parent.querySelectorAll('div.js-show-service').length;
const clonediv=function( n ){
let clone=n.cloneNode( true );
clone.classList.add('clone');
clone.dataset.clone=i;
clone.querySelector( '.add_button' ).addEventListener('click',function(e){
clonediv( this );
}.bind( clone ) );
clone.querySelector( '.suppr_button' ).addEventListener('click',function(e){
removediv( this )
}.bind( clone ) );
clone.querySelectorAll('input').forEach( inp => {if( inp.value!=='' )inp.value='';} )
clone.querySelectorAll('*').forEach( el=>{ if( el.hasAttribute('id') )el.removeAttribute('id') })
parent.appendChild( document.createComment( 'Clone: '+i ) );
parent.appendChild( clone );
clone.scrollIntoView({behavior:'smooth',block:'end'})
i++;
return clone;
}
const removediv=function( n ){
parent.removeChild( n );
}
Array.prototype.slice.call( document.querySelectorAll( 'button' ) ).forEach( function(bttn){
bttn.addEventListener('click',function(event){
if( this.className=='add_button' )clonediv( this.parentNode );
});
});
});
</script>
</head>
<body>
<h1>Repeated content using javascript</h1>
<!-- repeat ALL of the following -->
<div class='w-full dis-none js-show-service'>
<div class='wrap-input100 input100-select bg1'>
<div class='wrap-input100 input100-select bg1'>
<span class='label-input100'>Techno Garentie d'Origine *</span>
<div>
<select class='js-select2' name='service'>
<option value='Solaire'>Solaire
<option value='Hydro'>Hydraulique
<option value='Eolien'>Eolienne
<option value='BioMasse'>BioMasse
</select>
<div class='dropDownSelect2'></div>
</div>
</div>
<div class='wrap-input100 input100-select bg1'>
<span class='label-input100'>Provenance Garentie d'Origine *</span>
<div>
<select class='js-select2' name='service'>
<option value='europe'>Europe
<option value='allemagne'>Allemagne
<option value='autriche'>Autriche
<option value='belgique'>Belgique
<option value='chypre'>Chypre
<option value='croatie'>Croatie
<option value='danemark'>Danemark
<option value='espagne'>Espagne
<option value='estonie'>Estonie
<option value='finlande'>Finlande
<option value='France'>France
<option value='irlande'>Irlande
<option value='islande'>Islande
<option value='italie'>Italie
<option value='lituanie'>Lituanie
<option value='luxembourg'>Luxembourg
<option value='norvege'>Norvege
<option value='pays-bas'>Pays-Bas
<option value='republique-tcheque'>Republique-Tcheque
<option value='slovenie'>Slovénie
<option value='suede'>Suède
<option value='suisse'>Suisse
</select>
<div class='dropDownSelect2'></div>
</div>
</div>
<div class='wrap-contact100-form-range'>
<span class='label-input100'>Pourcentage D'energie Verte *</span>
<div class='contact100-form-range-value'>
<span class='value-upper'>50</span>%
<input type='text' name='from-value' />
<input type='text' name='to-value' />
</div>
<div class='contact100-form-range-bar'>
<div class='filter-bar'></div>
</div>
</div>
<!--<button class='suppr_button'>-</button>-->
</div>
<button class='add_button'>+</button>
<button class='suppr_button'>-</button>
</div>
<!-- END repeated content -->
</body>
</html>
单击按钮时重复DIV
.js节目服务{
保证金：1rem自动；
边框：1px纯红；
框大小：边框框；
填充：1rem；
}
.克隆{
边框：1件纯蓝！重要
}
输入，按钮，选择{padding:0.5rem}
按钮{最小宽度：10%；清除：无；浮动：无；边距：0.25rem；}
克隆人：以前{
内容：attr（数据克隆）；
颜色：白色；
背景：黑色；
填充：0.5雷姆；
宽度：2em；
高度：2em；
文本对齐：居中；
保证金：0；
左：-1em；
顶部：-0.5雷姆；
位置：相对位置；
}
document.addEventListener（'DOMContentLoaded'，e=>{
让parent=document.body；
设i=parent.querySelectorAll（'div.js-show-service'）.length；
常数clonediv=函数（n）{
设clone=n.cloneNode（true）；
clone.classList.add（'clone'）；
clone.dataset.clone=i；
clone.querySelector（'.add_按钮'）。addEventListener（'click'，函数（e）{
克罗尼迪夫（本）；
}.绑定（克隆））；
clone.querySelector（'.suppr_按钮'）。addEventListener（'click'，函数（e）{
移除（本）
}.绑定（克隆））；
clone.querySelectorAll（'input'）.forEach（inp=>{if（inp.value！=''）inp.value=''；}）
clone.querySelectorAll（'*'）.forEach（el=>{if（el.hasAttribute（'id'））el.removeAttribute（'id'））
parent.appendChild（document.createComment（'Clone:'+i））；
父。子（克隆）；
ScrollingToView（{行为：'smooth'，块：'end'}）
i++；
返回克隆；
}
const removediv=函数（n）{
父母。移除儿童（n）；
}
Array.prototype.slice.call（document.querySelectorAll（'button'））.forEach（函数（bttn）{
bttn.addEventListener（'click'，函数（事件）{
if（this.className=='add_button'）clonediv（this.parentNode）；
});
});
});
使用javascript重复内容
原厂技术设备*
索莱尔
水螅
伊洛里安
生物标志
原产地*
欧洲
阿勒曼
奥特里奇
Belgique
切普雷
<div id="myDiv"> </div>
<button class="add_button" onclick="addDiv()">+</button>
<script>
function addDiv() {
var newDiv = document.createElement('div');
newDiv.id= "someID";
newDiv.className = "class";
document.getElementById('myDiv').appendChild(newDiv);
}
</script>