我正在尝试创建一个用户单击按钮并添加标签、输入和删除按钮的工具。我大部分时间都在工作,但只缺少几件事。如果用户假设添加了“4”项,他/她删除了“2”项;我希望标签值减去其值的“-1”,并希望该项目的 id 减去其值的“-1”。任何帮助,将不胜感激!
我在下面创建了一个 jsFiddle:
http://jsfiddle.net/ryanverdel/fUhL8/
HTML
<input type="input" value="0" id="theValue" />
<div id="myDiv">
</div>
Javascript
function addItem() {
if ($('#theValue').val() < 10){
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('form');
var newlabel = document.createElement('input');
var newinput = document.createElement('input');
var newbutton = document.createElement('input');
var divIdName = 'Address'+num;
newdiv.setAttribute('id',divIdName);
newbutton.setAttribute('type','button');
newbutton.setAttribute('onclick','onclick=confirmDelete("'+divIdName+'"); return false;');
newbutton.setAttribute('value','Delete');
//newlabel.innerHTML ='Address('+num+')';
newlabel.setAttribute('value','Address '+num+':')
newlabel.setAttribute('size','8');
newlabel.setAttribute('class','label');
newlabel.setAttribute('readonly','true');
newinput.setAttribute('type','text');
newinput.setAttribute('id',divIdName+'_input');
ni.appendChild(newdiv);
newdiv.appendChild(newlabel);
newdiv.appendChild(newinput);
newdiv.appendChild(newbutton);
}
else{
return false;
};
}
function confirmDelete(divNum){
if (confirm("Are you sure you want to delete " +divNum+"?"))
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
var getLabel = olddiv.getElementsByClassName("label");
var counter= $('#theValue').val();
$('#theValue').val( (counter-1<0)?counter:--counter );
//$(getLabel).nextAll().css( "color", "red" );
$(olddiv).nextAll().css('background-color', 'red').css('color','red');
d.removeChild(olddiv);
}
else{};
}