/    Sign up×
Community /Pin to ProfileBookmark

Hi all,

on my page i add emelents when a button is pressed using:

var row = document.createElement(“TR”);
var cell1 = document.createElement(“TD”);
var inp1 = document.createElement(“select”);

I would also like to be able to remove these elements on the click of a button.

Is this possible?

Thanks

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@KorJul 28.2005 — if they are nested, it is enough to remove the element which is the parent of the others... cam we see the code?
Copy linkTweet thisAlerts:
@alexjamesthomasauthorJul 28.2005 — var inp2 = document.createElement("INPUT");

inp2.setAttribute("type","text");

inp2.setAttribute("size","5");

inp2.setAttribute("name","qty"+x);

cell2.appendChild(inp2);

row.appendChild(cell2);

tbody.appendChild(row);

I have shown the second element as the first is a selection box, therfore the code is huge.
Copy linkTweet thisAlerts:
@KorJul 28.2005 — 
therfore the code is huge.
[/quote]

U might have use loops and subroutine functions to shorten it.

still I have not enough data to help you properly

Anyway, I guess that you want to remove a row... Probably you need a button in each row, at the end of the row. If so, have a look at one of my elder works, maybe it will help you.
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var oInpN =['income_name','value'];
var oSelN ='income_type';
var oOptV =['Salary','Rental Income','Social Security','Pension']
var q=0;
function addE(){
var root = document.getElementById('container');
var oDiv = document.createElement('div');
var oInp= new Array()
for(var i=0;i<oInpN.length;i++){
oInp[i] = document.createElement('input');
oInp[i].setAttribute('type','text');
oInp[i].setAttribute('size',20);
oInp[i].setAttribute('name',oInpN[i]+q)
}
var oSel = document.createElement('select');
oSel.setAttribute('size',1);
oSel.setAttribute('name',oSelN+q);
for(var i=0;i<oOptV.length;i++){
var oOpt = document.createElement('option');
var oTxt = document.createTextNode(oOptV[i]);
oOpt.setAttribute('value',oOptV[i]);
oOpt.appendChild(oTxt);
oSel.appendChild(oOpt);
}
var oBut = document.createElement('input');
oBut.setAttribute('type','button');
oBut.setAttribute('value','remove');
oDiv.appendChild(oInp[0]);
oDiv.appendChild(oSel);
oDiv.appendChild(oInp[1]);
oDiv.appendChild(oBut);
oBut.onclick=function(){
var oRoot = this.parentNode;
root.removeChild(oRoot);
q--;
if(q>0){renameE();}
}
root.appendChild(oDiv);
q++;
}
function renameE(){
var oDivs = document.getElementById('container').getElementsByTagName('div');
for(var i=0;i<oDivs.length;i++){
for(var j=0;j<oInpN.length;j++){
oDivs[i].getElementsByTagName('input')[j].setAttribute('name',oInpN[j]+i);
}
oDivs[i].getElementsByTagName('select')[0].setAttribute('name',oSelN+i)
}
}
</script>
</head>
<body>
<form>
<div id="container"></div>
<input type="button" value="add" onclick="addE()">
</form>
</body>
</html>
[/code]
×

Success!

Help @alexjamesthomas spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...