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>

Plain vanilla JavaScript or jQuery?

j08691
– j08691

2012-12-12 16:47:00 +00:00
Commented Dec 12, 2012 at 16:47 — j08691
– j08691, Commented Dec 12, 2012 at 16:47
possible duplicate of JavaScript: remove element by id

MrCode
– MrCode

2012-12-12 16:56:24 +00:00
Commented Dec 12, 2012 at 16:56 — MrCode
– MrCode, Commented Dec 12, 2012 at 16:56

Denys Séguret · Accepted Answer · 2012-12-12 16:48:00Z

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, 2012 at 16:48

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Denys Séguret Over a year ago

Yes. Maybe I should have precised that you can't loop in the other direction as the list is updated dynamically.

Kyle Richter Over a year ago

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.

Denys Séguret Over a year ago

@KyleRichter Maybe you should also read the last line of my answer.

grigno · Accepted Answer · 2012-12-12 16:52:05Z

1

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

answered Dec 12, 2012 at 16:52

grigno

3,1985 gold badges37 silver badges47 bronze badges

Comments

Ma9ic · Accepted Answer · 2012-12-12 16:52:41Z

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, 2012 at 16:52

Ma9ic

1,1355 gold badges16 silver badges30 bronze badges

Comments

Newred · Accepted Answer · 2016-05-02 10:50:50Z

0

It's work!

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

answered May 2, 2016 at 10:50

Newred

7398 silver badges8 bronze badges

Comments

Muhammad Mohsin Muneer · Accepted Answer · 2016-05-02 10:58:12Z

0

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();
    }

answered May 2, 2016 at 10:58

Muhammad Mohsin Muneer

4335 silver badges14 bronze badges

Comments

Kyle Richter · Accepted Answer · 2012-12-12 18:03:12Z

-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, 2012 at 18:03

answered Dec 12, 2012 at 16:55

Kyle Richter

4063 silver badges18 bronze badges

7 Comments

Denys Séguret Over a year ago

removeNode only exists on IE.

Kyle Richter Over a year ago

Even more reason to use jQuery's remove() method. :)

Denys Séguret Over a year ago

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.

I Hate Lazy Over a year ago

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.

Kyle Richter Over a year ago

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.

|

Collectives™ on Stack Overflow

How do you delete a html input element using JavaScript?

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related