Databases
StackOverflow2013
Postsdbo
POHow to delete the information from dynamically created table
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to delete the information from dynamically created table
    text
    copied!<pre><code>&lt;table&gt; &lt;form&gt; &lt;tr&gt;&lt;td colspan="4"&gt;&lt;div id="myTableData" style="display:none;"&gt;&lt;table&gt;&lt;tr&gt;&lt;td width="175"&gt;NAME&lt;/td&gt;&lt;td width="245"&gt;&amp;nbsp;Gender&lt;/td&gt;&lt;td width="245"&gt;Date of Birth&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td colspan="4"&gt;&lt;input type="button" value="ADD KID " onClick="addrow()" /&gt; &lt;tr&gt;&lt;td&gt;&lt;input type="submit" name="reg" value="" class="submitbut" onclick="chkform()"/&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;script&gt; function addrow() { document.getElementById("myTableData").style.display="block"; var el = document.createElement('input'); el.type = 'text'; el.name = 'kname'; var del = document.createElement('input'); del.type = 'button'; del.name = 'delll'; del.value = 'del'; var el_r = document.createElement('input'); el_r.type = 'radio'; el_r.name = 'gender'; el_r.value ='FEMALE'; el_r.id = "rad1"; el_r.defaultChecked = true; var el_r2 = document.createElement('input'); el_r2.type = 'radio'; el_r2.name = 'gender'; el_r2.value ='MALE'; el_r2.id = "rad2"; var obj1 = document.createTextNode("Female"); var obj2 = document.createTextNode("Male"); var objLabel = document.createElement("label"); objLabel.htmlFor = el_r.id; objLabel.appendChild(el_r); objLabel.appendChild(obj1); var objLabel2 = document.createElement("label"); objLabel2.htmlFor = el_r2.id; objLabel2.appendChild(el_r2); objLabel2.appendChild(obj2); var el_s = document.createElement('select'); el_s.onchange = function(){ var r = el_s.options[el_s.selectedIndex].value; } for(var i=0;i&lt;32;i++) { var j = i; j = document.createElement('option'); j.text=i; j.name="day"; j.value=j; el_s.appendChild(j); } var month = new Array("January","Februray","March","April","May","June","July","August","September","October","November","December"); var el_sm = document.createElement('select'); for(var i=0;i&lt;month.length;i++) { var j = i; j = document.createElement('option'); j.text=month[i]; j.name="month"; j.value=month[i]; el_sm.appendChild(j); } var el_sy = document.createElement('select'); for(var i=2013;i&gt;1950;i--) { var j = i; j = document.createElement('option'); j.text=i; j.name="year"; j.value=j; el_sy.appendChild(j); } var table = document.getElementById("myTableData"); var tableBody = document.createElement('TBODY'); table.appendChild(tableBody); var tr = document.createElement('TR'); tableBody.appendChild(tr); var td = document.createElement('TD'); td.width='175'; td.appendChild(el); tr.appendChild(td); var td = document.createElement('TD'); td.width='245'; td.appendChild(objLabel); td.appendChild(objLabel2); tr.appendChild(td); var td = document.createElement('TD'); td.width='245'; td.appendChild(el_s); td.appendChild(el_sm); td.appendChild(el_sy); tr.appendChild(td); var td = document.createElement('TD'); td.width='20'; td.appendChild(del); tr.appendChild(td); myTableData.appendChild(table); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>There is a div which is hidden but when I click the add kid button the div is shown with 4 columns named name gender and date of birth and delete.</p> <p>I have dynamically created a table on button click addkid , AND now I want to remove the whole row containing information if delete button named (del) is clicked how is it possible. The whole thing is in form which works on submit.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload