Question

I’m not finding any question specifically with the odd problem I have. Basically I’ve got a form set up for inputting a users phone number and extension. I’ve made an Add button so I can add more phone/extensions to the form. I’ve got the adding working fine in the form and also for the SQL code. The problem is removing the form AND the SQL code. You can see in the code that each new entry has its own “Remove” link which holds the DIV info for that particular one. And it goes to a “remove” function which takes that one out. It works fine for the form, but it doesn’t do anything for the SQL code. I’ve created something similar for the SQL code so I have a function that will remove it. And just to test I put in the same “Remove” href as the forms, and if I click the link for the SQL portion it does remove it.
So I’m trying to find a way to click the Remove link on the form portion and have it take out that particular form and the corresponding SQL code.
I’ve toyed with the idea of trying to grab a Name from the form DIV which matches the DIV name of the SQL portion, but I can’t seem to get that to work.

    ////
    //-------------Add Phone Form----------------
    ////

    function addElement() { 

    var ni = document.getElementById('phoneDiv'); 
    var numi = document.getElementById('theValue'); 
    var num = (document.getElementById('theValue').value -1 + 2); 
    numi.value = num; 
    var newdiv = document.createElement('div'); 
    var divIdName = 'phoneDiv'+num+''; 
    var sqlDivIdName = 'SQL'+divIdName+'';
    newdiv.setAttribute('id',divIdName); 
    newdiv.innerHTML = '<input type=hidden id=' + num + ' name='+sqlDivIdName+' value='        + num + '><a href="javascript:remove('+divIdName+')">Remove</a> <tr><td>Phone Number:</td>  <td> <input type="text" name="phone' + num + '" maxlength="10"> </td></tr> <tr>  <td>Extension:</td><td> <input type="text" name="ext' + num +'" maxlength="5" value="00000">'; 
    ni.appendChild(newdiv); 

    javascript:addElement2(); 
    } 

    ////
    //-------------Add Phone SQL----------------
    ////

    function addElement2() {

var ni = document.getElementById('SQLphoneDiv'); 
    var numi = document.getElementById('theValue2'); 
    var num = (document.getElementById('theValue2').value -1 + 2); 
    numi.value = num; 
    var newdiv = document.createElement('div'); 
    var divIdName = 'SQLphoneDiv'+num+''; 
    newdiv.setAttribute('id',divIdName); 
    newdiv.innerHTML = '<input type=hidden id=' +num+ ' value=' +num+ '><a         href="javascript:removeSQL('+divIdName+')">Remove</a> $insert_phone = "INSERT INTO phone (Phone_Cust_ID,Phone_Numb,Ext) VALUES (\'$cust_ID[0]\',\'".$_POST[\'phone' +num+ '\']."\',\'".$_POST[\'ext' +num+ '\']."\')"; $add_phone = mysql_query($insert_phone);'; 
    ni.appendChild(newdiv); 
    }


    ////
    //-------------Remove Phone Form----------------
    ////

    function remove(xy) {
    var ni = document.getElementById('phoneDiv'); 


    ni.removeChild(xy);

    }


    ////
    //-------------Remove Phone SQL----------------
    ////

    function removeSQL(yz) {
    var ni = document.getElementById('SQLphoneDiv'); 
    ni.removeChild(yz);

    }

I’ve tried to use just one remove function instead of two, or to make the first remove function trigger the second, but I think the problem is that I can’t get the +divName+ information on the SQL portion for the child I’m trying to remove.

I’m very new to JavaScript so I’m sure jQuery has a very simple way to do this, but jQuery is confusing to me right now since I’m still trying to grasp most of the concepts in JavaScript alone.
Thanks for any tips I can get.

Also, I know the SQL isn’t really correct but I’m not worried about that right now. Once I get this function to work then I can clean everything up.

Nathan

Answer 1

You can store the SQLphoneDiv element id in your phoneDiv element by doing the following inside your addElement function

newdiv.sqlDivId = sqlDivIdName

Then in your remove function do

var sqlDiv = document.getElementById(xy.sqlDivId);
var sqlNi = document.getElementById('SQLphoneDiv');
sqlNi.removeChild(sqlDiv);