How do you delete a html input element using JavaScript?

Question

I want to delete the input elements from the table. I could not figure out any way to delete them via JavaScript.

<table><tbody><tr>
<td><input id="c11" value=" " size="1" style="border-width: 0px;" type="text"></input></td>
<td><input id="c12" value=" " size="1" style="border-width: 0px;" type="text"></input></td>
</tr>
</tbody>
</table>

possible duplicate of [JavaScript: remove element by id](http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id) — MrCode, Dec 12 '12 at 16:56

score 1 · Answer 1 · answered Dec 12 '12 at 16:48

1

You can do that :

var inputs = document.getElementsByTagName('input');
while (inputs.length) inputs[0].parentNode.removeChild(inputs[0]);

If you have your table element, you could also use myTable.getElementsByTagName('input');.

Demonstration

answered Dec 12 '12 at 16:48

Denys Séguret

372,613
87
782
758

Yes. Maybe I should have precised that you can't loop in the other direction as the list is updated dynamically. – Denys Séguret Dec 12 '12 at 17:24
This doesn't solve the problem though. He wanted only the inputs in the table, and technically this would remove ALL inputs on the page, so assuming that this is only an excerpt and not the full html, that would possibly be bad. – Kyle Richter Dec 12 '12 at 19:25
1

@KyleRichter Maybe you should also read the last line of my answer. – Denys Séguret Dec 12 '12 at 19:26

score 1 · Answer 2 · answered Dec 12 '12 at 16:52

1

document.getElementById('c11').outerHTML =  "";

answered Dec 12 '12 at 16:52

grigno

3,128
4
35
47

score 0 · Answer 3 · answered Dec 12 '12 at 16:52

0

if your using Jquery

Use .remove()

$("#yourtableid tr").remove();

If you want to keep the data for future use even after removing it then you can use .detach()

$("#yourtableid tr").detach();

answered Dec 12 '12 at 16:52

Ma9ic

1,107
4
16
30

score 0 · Answer 4 · answered May 02 '16 at 10:50

0

It's work!

document.getElementById('c11').val("");
document.getElementById('c12').val("");

answered May 02 '16 at 10:50

Newred

699
8
8

score 0 · Answer 5 · answered May 02 '16 at 10:58

Try this code

 function removeRow(r)
    {
         var fo = "foo";
         var ido = r.id.substring(3,r.id.length-1);
         for(i=1;i<=3;i++)
         {
            document.getElementById(fo+id0+i).remove();
         }
         document.getElementById(fo+ido+5).nextSibling.remove();  
         document.getElementById(fo+ido+5).remove();
    }

Kyle Richter · Answer 6 · 2012-12-12T18:03:12.923

-1

Personally, if you don't have access to jQuery, I would just give the parent element an id and then do this

var els = document.findElementById('tableId').childNodes.getElementByTagName('input');
for( var i = 0; i < els.length; i++){
    els[i].removeNode(true);
}

Alternately, you could substitute the code with something like this for complete browser compatibility, as @dystroy pointed out removeNode is only available in IE.

var els = document.getElementById('tableId').getElementsByTagName('input');
while( els.length ){
    els[0].parentNode.removeChild(els[0]);
}

Something like that should work. Honestly, I would use jQuery. Much easier.

edited Dec 12 '12 at 18:03

answered Dec 12 '12 at 16:55

Kyle Richter

406
3
18

removeNode only exists on IE. – Denys Séguret Dec 12 '12 at 16:56
Even more reason to use jQuery's remove() method. :) – Kyle Richter Dec 12 '12 at 16:57
1

jQuery is very often useful but you don't import a library like jQuery just to avoid typing two lines of code (see my answer). This only can't be a reason. – Denys Séguret Dec 12 '12 at 16:59
This will fail. You're performing forward iteration through a live list that is being modified. Every time you remove an element, the list is reindexed from that point forward. – I Hate Lazy Dec 12 '12 at 17:07
You're absolutely right. I modified it slightly. It's degrading in what I would consider a good solution, though. The goal was not to give an exact code example, rather show him how he might think through it logically to solve his problem, giving some javascript methods which would allow him to do that. – Kyle Richter Dec 12 '12 at 18:02
Why wouldn't you consider it to be a good solution? It's concise and fast. If you don't like the `els.length` test, you can do a reverse iteration instead, which avoids the problem as well and works if you're only removing a subset of nodes. – I Hate Lazy Dec 12 '12 at 18:08
...yes, but to think logically about the problem, one needs to understand all the facets. Understanding the behavior of a live list is a very relevant piece of the puzzle. – I Hate Lazy Dec 12 '12 at 18:09

How do you delete a html input element using JavaScript?

6 Answers6