Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to remove appendchild?

    Hi,

    I have created a form whereby user will see 1 row with 2 fields and a add button initially. When user click on the add button, another row will appear etc.

    However, I am stuck on how to remove those appendchild? Can someone please kindly help? Thanks

    Example:
    User click add button, 1 row appear with a remove link behind that row. If user click another time add button, 1 more row appear with another remove link etc.

    So if user click on the remove link that belong to that row, the appendchild will be remove.


    ------------------------------------------------------------------
    <script type="text/javascript">
    function addInput(){
    var tbl = document.getElementById('tblAddress');
    var lastRow = tbl.rows.length;
    var row = tbl.insertRow(lastRow);

    var cell0 = row.insertCell(0);
    var el = document.createElement('input');
    el.type='text';
    el.name='name[]';
    cell0.appendChild(el);

    var cell1 = row.insertCell(1);
    var el = document.createElement('input');
    el.type ='text';
    el.name='address[]';
    cell1.appendChild(el);
    }
    </script>


    <table align="center" border="1" id="tblAddress">
    <tr>
    <td><b>Name</b></td>
    <td><b>Address</b></td>
    </tr>

    <tr>
    <td><input type="text" name="name[]"></td>
    <td><input type="text" name="address[]"></td>
    </tr>
    </table>
    <p align="center"><input type="button" value="Add" onClick="addInput();"></p>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,906
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try this:-

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
      
    var deleted = 0;   
    function addRow(tableID) {             
    var table = document.getElementById(tableID);             
    var rowCount = table.rows.length;            
    var row = table.insertRow(rowCount);             
    var cell1 = row.insertCell(0);            
    var element1 = document.createElement("input");            
    element1.type = "checkbox";            
    cell1.appendChild(element1);             
    var cell2 = row.insertCell(1);            
    cell2.innerHTML = rowCount + 1 + deleted;             
    var cell3 = row.insertCell(2);            
    var element2 = document.createElement("input");            
    element2.type = "text";            
    cell3.appendChild(element2);    
    var cell4 = row.insertCell(3);            
    var element3 = document.createElement("input");            
    element3.type = "text";            
    cell4.appendChild(element3);        
    }         
    
    function deleteRow(tableID) {            
    try {            
    var table = document.getElementById(tableID);            
    var rowCount = table.rows.length;             
    for (var i=0; i<rowCount; i++) {                
    var row = table.rows[i];                
    var chkbox = row.cells[0].childNodes[0];                
    if (null != chkbox && true == chkbox.checked) {                   
    table.deleteRow(i);                    
    rowCount--; 
    deleted ++;     
    i--;                
    }             
    }            
    }
    catch(e) {                
    alert(e);            
    }        
    }     
    </script>
    </head>
    
    <body>
         
    <input type="button" value="Add Row" onclick="addRow('dataTable')" /> 
    <input type="button" value="Delete Checked Row(s)" onclick="deleteRow('dataTable')" />     
    <table id="dataTable" width="350px" border="1">        
    <TR>            
    <TD><input type="checkbox" name="chk"/></TD>            
    <TD> 1 </TD>            
    <TD> <input type="text" /> </TD>  
     <TD> <input type="text" /> </TD>  
    
    </TR>    
    </table> 
    
    </body>
    </html>
    The trouble with ignorance is it picks up confidence as it goes along.
    Last edited by Philip M; 12-20-2012 at 08:31 AM. Reason: Correction

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    function addInput(){
     var tbl = document.getElementById('tblAddress');
     var lastRow = tbl.rows.length;
     var row = tbl.insertRow(lastRow);
    
     var cell0 = row.insertCell(0);
     var el = document.createElement('input');
     el.type='text';
     el.name='name[]';
     cell0.appendChild(el);
    
     var cell1 = row.insertCell(1);
     el = document.createElement('input');
     el.type ='text';
     el.name='address[]';
     cell1.appendChild(el);
     el = document.createElement('input');
     el.type ='button';
     el.value='X';
     el.onmouseup=function(){ Remove(this); }
     cell1.appendChild(el);
    }
    
    function Remove(obj){
     while (obj.parentNode){
      if (obj.nodeName.toUpperCase()=='TR'){
       break;
      }
      obj=obj.parentNode;
     }
     obj.parentNode.removeChild(obj);
     return;
    }
    
    </script>
    
    
    <table align="center" border="1" id="tblAddress">
    <tr>
    <td><b>Name</b></td>
    <td><b>Address</b></td>
    </tr>
    
    <tr>
    <td><input type="text" name="name[]"></td>
    <td><input type="text" name="address[]"></td>
    </tr>
    </table>
    <p align="center"><input type="button" value="Add" onClick="addInput();"></p>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    function addInput(){
     var tbl = document.getElementById('tblAddress');
     var lastRow = tbl.rows.length;
     var row = tbl.insertRow(lastRow);
    
     var cell0 = row.insertCell(0);
     var el = document.createElement('input');
     el.type='text';
     el.name='name[]';
     cell0.appendChild(el);
    
     var cell1 = row.insertCell(1);
     el = document.createElement('input');
     el.type ='text';
     el.name='address[]';
     cell1.appendChild(el);
     el = document.createElement('input');
     el.type ='button';
     el.value='X';
     el.onmouseup=function(){ Remove(this); }
     cell1.appendChild(el);
    }
    
    function Remove(obj){
     while (obj.parentNode){
      if (obj.nodeName.toUpperCase()=='TR'){
       break;
      }
      obj=obj.parentNode;
     }
     obj.parentNode.removeChild(obj);
     return;
    }
    
    </script>
    
    <form name="form" method="post" action="test.php" onsubmit="return validateForm()">
    <table align="center" border="1" id="tblAddress">
    <tr>
    <td><b>Name</b></td>
    <td><b>Address</b></td>
    </tr>
    
    <tr>
    <td><input type="text" name="name[]"></td>
    <td><input type="text" name="address[]"></td>
    </tr>
    </table>
    <p align="center"><input type="button" value="Add" onClick="addInput();"></p>
    </form>
    </body>
    
    </html>
    Hi,

    I am trying to add an alert prompt if any of the fields are empty. For the first row, i can successfully prompt user. However, if i click on add, those appendchild will not be prompt alert if it is null. Can kindly advice on this? Thanks.

    <script type="text/javascript">
    function validateForm(){
    var x=document.forms["form"]["name[]"].value;
    var y=document.forms["form"]["address[]"].value;

    if (x=="" || x==null){
    alert("Please fill in name field!");
    return false;
    }else if (y=="" || y==null){
    alert("Please fill in address field!");
    return false;
    }
    }
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •