Javascript- Hoe to delete rows by id.

Hi, every one....recently i have learn how to delete rows from a table, but i was trying to do it by mean of the row id, and i could do it...so if any one have a wonderful idea..please let me know. please could you also upload the code when you live your advice...thank firends...

Enrico!

Newbie Poster

5 posts since Jun 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Enrico,

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<script>
onload = function(){
	var row = document.getElementById('row1');
	row.parentElement.removeChild(row); 
}
</script>
</head>

<body>

<table border>
<tbody>
<tr id="row1">
<td>aaaa</td>
<td>bbbb</td>
</tr>
<tr id="row2">
<td>xxxx</td>
<td>yyyy</td>
</tr>
</tbody>
</table>

</body>
</html>

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

Actually, change this line:

row.parentElement.removeChild(row);

To this:

row.parentNode.removeChild(row);

parentElement is not defined in Firefox, but parentNode will be evaluated in both IE and Firefox.

itsjareds

Junior Poster

103 posts since May 2009

Reputation Points: 39

Solved Threads: 13

2 Years Ago

parentElement is not defined in Firefox, but parentNode will be evaluated in both IE and Firefox.

Thanks Jared, I have lost count of the number of times I've done that. I find parentElement more logical. Normally spot it on testing but was in quickfire mode last night.Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

this is great thanks to both of you......:)

Enrico!

Newbie Poster

5 posts since Jun 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

my friend it was great that little example but I'm having another little problem... I'm trying to pass the row id as a parameter by the method, that is called by a link, and it has been really heavy...i will live my little example, if you know how to do it, i will be really thankful , thank friend.....

<script>
function delete1(){	
	var row = document.getElementById('row1');
	row.parentNode.removeChild(row);
}
</script>

<table id="table1">
<tbody>
<tr id="row1">
<td>aaaa</td>
<td>bbbb</td>
<!-- HERE IS WHERE I WANT TO PASS THE ID VALUE, TROUGH THE METHOD AS A PARAMETER AND RECEIVE IT IN THE SCRIPT,
AND THEN TO DELETE THE ROW BY THIS ID......-->
<td><a href="javascript:delete1();">elimina</a></td>
</tr>
<tr id="row2">
<td>xxxx</td>
<td>yyyy</td>
<td>relleno</td>
</tr>
</tbody>
</table>

Enrico!

Newbie Poster

5 posts since Jun 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Enrico,

Try this:

<script>
	function deleteElement(id){ 
	var el = document.getElementById(id);
	el.parentNode.removeChild(el);
	return false;
}
</script>

<table border id="table1">
<tbody>
<tr id="row1">
<td>aaaa</td>
<td>bbbb</td>
<td><a href="" onclick="return deleteElement('row1');">elimina</a></td>
</tr>
<tr id="row2">
<td>cccc</td>
<td>dddd</td>
<td><a href="" onclick="return deleteElement('row2');">elimina</a></td>
</tr>
<tr id="row3">
<td>xxxx</td>
<td>yyyy</td>
<td>relleno</td>
</tr>
</tbody>
</table>

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

Hello everybody,

as I spent lot of time with converting some oldstyle database tables to a new template, I felt a need of a tool to handle with long list of columns, to find the relevant ones, to give them unique name etc...

With help of Internet knowledge I compiled the next code - the <?php ?> lines are deleteted, because PHP solved the data handling only with databases and its output was sent to JavaScript throuh a object obb.

The HTML code contains the skelet of a table row. After the page is loaded, the JavaScript code fill in the data and helps the user to manipulate with table rows.

The delete row function is an anonymous function glued with a delete button (which is hidden at the first row, of course). Hence no need of id reference is necessery while the keyword this resp. this.parentNode identifies the row enough.

The ins_row() function adds an empty rows and immediately replaces it with clone of the former row. As the values of elements are not subject to clone the simple code is added to copy them. The hidden is changed to type="button", what the mozilla based browsers allows but MSIE does not.

Sorry, I didnot internationalised the original data, because it has no effect to functionality of the code.

<HTML lang="cs"><HEAD>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE>Dynamic table</TITLE>
<script>var d=document,i,j,k,l;

function ins_row(refRow) // duplicate row with same values 
{ refRow.parentNode.replaceChild(refRow.cloneNode(true ),refRow.parentNode.insertRow(refRow.rowIndex+1));
  var inps = refRow.nextSibling.getElementsByTagName('input'); // let appear the clear button - sorry do not work in MSIE
  for(i=0;i<inps.length;i++){if(inps[i].type=='hidden')inps[i].type='button';};
      inps = refRow.nextSibling.getElementsByTagName('select');// duplicate select.values
  var sely = refRow.getElementsByTagName('select');
  for(i=0;i<inps.length;i++){inps[i].value=sely[i].value;};
}
function add_optionn(co,kam) // add one <OPTION> to the <OPTGROUP>
{ var k=0;var mx,clr; 
  var nop = new Option(co[0],co[0]);
      nop.title = nop.alt       = co[0];
      kam.appendChild(nop);
} 
function add_optiong(co,kam) // walk throu the list, add <OPTGROUP> 
{ var i,mpi='';              // or <OPTION>
  for (var i in co)      // <OPTION>s are grouped by first letter
  { if (mpi == co[i][0].slice(0,1))
    { add_optionn(co[i],oGroup);}
    else 
    { if (mpi != '')
      { oGroup.label=mpi+':';
        kam.appendChild(oGroup); 
      }
      mpi = co[i][0].slice(0,1);
      var oGroup = d.createElement('optgroup');
      add_optionn(co[i],oGroup);
    }
  } oGroup.label=mpi+':';kam.appendChild(oGroup);
}
function uka(tt)
{ var hh="&nbsp;| ";var ho=tt.value;  
  tt.parentNode.nextSibling.firstChild.value=ho.replace(/\./,'_');
  for(var i=1;i<5;i++){ hh += obb[ho][i] + " | ";}
  tt.parentNode.nextSibling.nextSibling.innerHTML=hh;
}
function petrklic()
{ var ss=d.getElementsByTagName('select')[0];
  add_optiong(obb,ss); uka(ss);
      ss=d.getElementsByTagName('tbody')[0];
}
var obb=
{'t.A_ID':['t.A_ID','Přírůstkové číslo','int','10','9']
,'t.T_Nazev':['t.T_Nazev','Název','varchar','80','80']
,'t.T_ICO':['t.T_ICO','','varchar','8','']
,'t.R_typ':['t.R_typ','','varchar','20','4']
,'a.R_typ':['a.R_typ','','varchar','20','5']
,'a.T_Jmeno1':['a.T_Jmeno1','Jméno I.','varchar','250','121']
,'a.T_Jmeno2':['a.T_Jmeno2','Jméno II.','varchar','250','25']
,'a.T_Ulice':['a.T_Ulice','Ulice','varchar','60','45']
,'a.P_PSC':['a.P_PSC','PSČ','varchar','6','6']
,'a.T_Misto':['a.T_Misto','Místo','varchar','40','30']
,'a.T_Post':['a.T_Post','Dodací pošta','varchar','40','11']
,'a.T_Email':['a.T_Email','e-mail','varchar','60','']
,'h.R_typ':['h.R_typ','','varchar','20','7']
,'h.T_Jmeno1':['h.T_Jmeno1','Jméno I.','varchar','250','30']
,'h.T_Jmeno2':['h.T_Jmeno2','Jméno II.','varchar','250','80']
,'h.T_Ulice':['h.T_Ulice','Ulice','varchar','60','30']
,'h.P_PSC':['h.P_PSC','PSČ','varchar','6','6']
,'h.T_Misto':['h.T_Misto','Místo','varchar','40','30']
,'h.T_Post':['h.T_Post','Dodací pošta','varchar','40','']
,'h.T_Email':['h.T_Email','e-mail','varchar','60','']};
</script>
</HEAD>
<BODY onLoad="petrklic()"><form method="post" action="./spunt.php"><table><tr><td><select name="rw[][col]" style="width: 150px;" onChange="uka(this)"></td><td><input name="rw[][ncl]"  onChange="kontr_text(this)"></td><td width="360px"></td><td><input type="button" value="+" onclick="ins_row(this.parentNode.parentNode)">&nbsp;<input type="hidden" value="&nbsp;-&nbsp;" onclick="this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex );"></td></tr></table></form></BODY>
</HTML>

The realtive reference makes the code more simple. I didnot cared about the compatibility with the MSIE, because I do not use. If someone is in charge to do such investigative work, some people may appreciate it.

Jan

sysel

Light Poster

49 posts since Jun 2009

Reputation Points: 11

Solved Threads: 3

This article has been dead for over three months

You