我在字段集中添加测试,虽然我可以添加它们,但我不确定如何编写正确的函数来删除它们。我有它在javascript工作,但被要求使用JQuery编写它,似乎无法使其工作。我研究过的所有例子似乎都不适用于我的原始克隆功能,它在其中构建了一个删除按钮。字段集也重复,我已经为此工作了代码,只需要一点这个删除事件函数的帮助。
这里是javascript / jquery:
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('dataTes');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "dataTes" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
function remove(){
}
这是html:
<fieldset>
<legend>Test</legend>
<input type="submit" class="button" id = "button" value="+" onlick="duplicate()" title = "#">
<input type="submit" class="button" id = "button" value="-" onlick="remove()" title = "#">
<div id="dataTes">
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
<tr>
<td width="100px">Test</td>
<td width="2px">:</td>
<td width="2px"><input type="text" name="usrname"></td>
<td>
<input type="submit" class="button" id = "add" value="+" onClick="addRow('#')" title = "#">
<input type="submit" class="button" id = "add" value="-" onClick="deleteRow('#')" title = "#">
</td>
</tr>
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill</td>
<td width="2px">:</td>
<td><input type="text" name="usrname"></td>
</tr>
<tr>
<td width="2px"></td>
<td width="100px">Fill</td>
<td width="2px">:</td>
<td><input type="text" name="usrname"></td>
</tr>
<table id="dataID" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
</table>
</table>
</table>
</div>
</fieldset>
答案 0 :(得分:1)
1)重命名按钮上的重复ID(最初都是id="button"
)。
<input type="submit" class="button" id = "button_duplicate" value="+" onlick="duplicate()" title = "#">
<input type="submit" class="button" id = "button_remove" value="-" onlick="remove()" title = "#">
2)将duplicate()
和remove()
函数绑定在正确的按钮上。而不是document.getElementById('button').onclick = duplicate;
$("#button_duplicate").click(function(){
duplicate();
});
$("#button_remove").click(function(){
remove();
});
3)删除功能:
function remove(){
if($("#dataTes" + i).length > 0){
$("#dataTes" + i).remove();
i--;
}
}
答案 1 :(得分:1)
这是快速而完整的解决方案。将内联函数移除到元素add
和remove
按钮,并将事件附加到id
,如下所示:
var id = 0; //global id to create unique id
$(document).ready(function() {
//attach click event to element/button with id add and remove
$("#add,#remove").on('click', function() {
var currentElemID = $(this).attr('id'); //get the element clicked
if (currentElemID == "add") { //if it is add elem
var cloneParent = $("#dataTes").clone(); //clone the dataTes element
id=$("div[id^=dataTes]").length;//get the count of dataTes element
//it will be always more than last count each time
cloneParent.find('[id]').each(function() {
//loop through each element which has id attribute in cloned set and replace them
//with incremented value
var $el = $(this); //get the element
$el.attr('id', $el.attr('id') + id);
//ids would now be add1,add2 etc.,
});
cloneParent.attr('id', cloneParent.attr('id') + id);//replace cloneParent id
cloneParent.appendTo('fieldset');//append the element to fieldset
$("#remove").show();//show remove button only if there is more than one dataTes element
} else {
$("div[id^=dataTes]:last").remove();
//just remove the last dataTes
//[id^=dataTes]:last annotates remove last div whose id begins with dataTes
//remember we have id like dataTes1,dataTes2 etc
if($("div[id^=dataTes]").length==1){
//check if only one element is present
$("#remove").hide();//if yes hide the remove button
}
}
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>Test</legend>
<input type="submit" class="button" id="add" value="+" title="#">
<input type="submit" class="button" id="remove" value="-" style="display:none;" title="#">
<!--hide the remove button with display:none initially-->
<div id="dataTes">
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:10px;" width="97%">
<tr>
<td width="100px">Test</td>
<td width="2px">:</td>
<td width="2px">
<input type="text" name="usrname">
</td>
<td>
<input type="submit" class="button" id="add" value="+" title="#">
<input type="submit" class="button" id="sub" value="-" title="#">
</td>
</tr>
<table align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-top:5px;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<tr>
<td width="2px"></td>
<td width="100px">Fill</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
<table id="dataID" align="center" cellpadding="3" cellspacing="0" style="border-collapse:collapse;margin-left:40px;" width="97%">
<tr>
<td width="2px"></td>
<td width="100px">Fill</td>
<td width="2px">:</td>
<td>
<input type="text" name="usrname">
</td>
</tr>
</table>
</table>
</table>
</div>
</fieldset>
&#13;
逐行解释为评论。如果这让你感到困惑,请告诉我。
答案 2 :(得分:0)
i的值将在上下文中。因此,您可以获取元素的ID并将其删除。然后减少我。试试这个:
编辑(更正后的代码):
function remove(){
var elId = "dataTes" + i;
var element = document.getElementById(elId);
element.parentNode.removeChild(element);
i--;
}
首先,您需要更改html代码中按钮的ID。
<input type="submit" class="button1" id = "add" value="-" onClick="deleteRow('#')" title = "#">
在javascript中,应该是:
document.getElementById('button').onclick = duplicate;
document.getElementById('button1').onclick = remove;