Member Avatar for mike3608

Hello friends I have made the below mentioned code, it is working but its second function to delete a row is not working:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script>
function generateRow() 
{ 
var d=document.getElementById("sip");
d.innerHTML+="<p> <input type='text'></p>"; 
}

function deleterow()
{
var f=document.getElementById("sip");
f.innerHTML-="<p> <input type='text'></p>"; 
}
</script>
</head> 
<body>

<div id="sip">
<tr align="right"><td><input type="button" value="+"  onclick="generateRow()"></td></tr>
<tr align="right"><td><input type="button" value="-"  onclick="deleterow()"></td></tr>
</div>


</body>
</html>
Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 2 Contributors
  • 1 Reply
  • 84 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Mike,

Whereas you can use += to append html, you can't use -= to remove it. The reason is that - is only ever a mathemaical operator (subtract).

Also, consider the case where the user has added more than one row. You probably need a mechanism to delete each row independently. Therefore a single [-] button would be inadequate.

Try the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script>
function generateRow() {
	var d = document.getElementById("sipContent");
	d.innerHTML += "<p><input type='text'>&nbsp;<input type='button' value='-' onclick='deleterow(this.parentNode)'></p>";
}

function deleterow(row) {
	row.parentNode.removeChild(row);
}
</script>
</head> 
<body>

<div id="sip">
	<div id="sipControls">
		<input type="button" value="+"  onclick="generateRow()">
	</div>
	<div id="sipContent"></div>
</div>

</body>
</html>

You will see that row deletion is achieved with a little piece of "DOM scripting".

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.