CodingForums.com - How to remove appendchild?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - How to remove appendchild? (http://www.codingforums.com/showthread.php?t=284443)

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>

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.

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>

Quote:

Originally Posted by vwphillips (Post 1301229)

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>