Javascript- Hoe to delete rows by id.

Question

Enrico! 0 Newbie Poster

14 Years Ago

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...

javascript

4 Contributors
7 Replies
8K Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by sysel

All 7 Replies

Airshow 416 WiFi Lounge Lizard

14 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 416 WiFi Lounge Lizard

14 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

Reply to this topic

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.

itsjareds 29 Junior Poster · Answer 1 · 2009-06-10T11:49:47+00:00

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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2009-06-10T16:57:15+00:00

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

Enrico! 0 Newbie Poster · Answer 3 · 2009-06-11T00:20:04+00:00

Enrico! 0 Newbie Poster

14 Years Ago

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

Enrico! 0 Newbie Poster · Answer 4 · 2009-06-11T04:55:29+00:00

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>

sysel 0 Light Poster · Answer 5 · 2009-06-19T20:27:25+00:00

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 <select > elements are not subject to clone the simple code is added to copy them. The hidden <input > 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

Javascript- Hoe to delete rows by id.

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers