CODEWITHSUNDEEP
javascripthtml
Waseem
Waseem

Reputation: 41

How do you delete a html input element using JavaScript?

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>

Upvotes: 2

Views: 10074

Answers (6)

Muhammad Mohsin Muneer
Muhammad Mohsin Muneer

Reputation: 433

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

Upvotes: 0

Newred
Newred

Reputation: 729

It's work!

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

Upvotes: 0

Kyle Richter
Kyle Richter

Reputation: 406

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.

Upvotes: -1

Ma9ic
Ma9ic

Reputation: 1125

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

Upvotes: 0

grigno
grigno

Reputation: 3198

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

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382122

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

Upvotes: 1

Related Questions