0

ユーザーがボタンをクリックすると、ラベル、入力、削除ボタンが追加されるツールを作成しようとしています。ほとんどの場合、すべてが機能していますが、不足しているものはいくつかあります。ユーザーが「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{};
    }
4

0 に答える 0