Removing multiple Div Elements at once -- JavaScript

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

Brant Olsen · Accepted Answer · 2012-04-06 19:08:59Z

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);

answered Apr 6, 2012 at 19:08

Brant Olsen

5,6645 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fender357 Over a year ago

Thank you Brant!! That did exactly what I needed! I knew I was somewhere in the area of making it work. There's just more I need to learn with JS. Very grateful!

khollenbeck · Accepted Answer · 2012-04-06 19:22:27Z

0

I know you are looking for a pure JavaScript solution, however I figured I would post a jQuery solution just for reference. Anyways when using jQuery it is best practice to load your functions inside of a document ready function... like so...

$(document).ready(function(){


});

This does basically what it reads. It waits for the document to fully load before running the function.

From there you could do a click function like so...

Example HTML

<a href="" id="mylink">My Link</a>

jQuery

 $('#mylink').click(function(){

    });

And then to remove the link you can use .remove() ... So all together it would look like this...

$(document).ready(function(){

$('#mylink').click(function(){
   $('#mylink').remove();
});

});

And to remove multiple IDS using one click you can do this...

$('#mylink, #mylink2, #mydiv').remove();

I doubt this is the answer you are looking for. However when you do decide to start tackling jQuery you will learn to love how little code you need to do what use to take a lot of code.

answered Apr 6, 2012 at 19:22

khollenbeck

16.2k18 gold badges68 silver badges102 bronze badges

1 Comment

fender357 Over a year ago

Your right that it's not quite the answer I'm looking for but I really appreciate the answer. Anything I can read for jQuery to better understand how it works along with standard JavaScript is very helpful. Thank you Kris!

tuoxie007 · Accepted Answer · 2012-04-06 19:24:16Z

0

So long, i don't want to see. Do you want to remove a element by id? This function can work.

function removeById(id) {
    var toremoved = document.getElementbyId(id);
    toremoved.parentNode.removeChild(toremoved);
}

answered Apr 6, 2012 at 19:24

tuoxie007

1,23612 silver badges10 bronze badges

Collectives™ on Stack Overflow

Removing multiple Div Elements at once -- JavaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related