How to remove attributes from HTML using javascript?

Question

I have an HTML with say a textfield (input element).

<input name="capacity" type="text" value="blah blah blah">

This simply displays a text field on my page with a default value "blah blah blah".

What I want to do is remove value attribute, as I don't want to see this default value. I am doing this using javascript.

value = element.getAttribute("value");
    if((element.readOnly != undefined || element.readOnly == false) || (element.disabled != undefined || element.disabled == false)){
    //element.removeAttribute(value);    
    element.removeAttribute("value");

But it is not working. I even tried

element.setAttribute("value","");

but no luck.
Any pointers where I may be missing.

EDIT :
I got an issue related to this question, anyone interested may check this

*********************************************

Thanks a lot.

Have you considered using a placeholder attribute instead of a default value? Only works in modern browsers though. — RobG
– RobG, Commented Sep 27, 2011 at 6:41
@Chamika Already done that...See 3rd comment for alex's answer.Thanks for replying, though. — EMM
– EMM, Commented Sep 27, 2011 at 8:42

alex · Accepted Answer · 2011-09-27 05:31:13Z

3

...I don't want to see this default value.

Just set the value property directly to an empty string.

document.getElementsByName('capacity')[0].value = '';

jsFiddle.

answered Sep 27, 2011 at 5:31

alex

492k205 gold badges890 silver badges992 bronze badges

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

6 Comments

EMM Over a year ago

by directly you mean, simply open the HTML into edit mode instead of browser and change the attribute manually.

alex Over a year ago

@mohit That's now what I meant, but if you could do that, why bother with JavaScript at all? What outputs this form element?

EMM Over a year ago

It worked . I was too worked up with removeAttribute and setAttribute that I totally missed this simple friend of mine. :) Thanx alex. I modified it a bit though. element.value=""; This way I don't need to care about id or name of my elements.

EMM Over a year ago

It seems that the values are not being changed permanently. I mean as I refresh the page it starts showing the old values again.Any idea what is going on ?

alex Over a year ago

@mohit That's expected behaviour. HTTP is a stateless protocol by design.

|

Umer Hayat · Accepted Answer · 2011-09-27 05:34:47Z

0

Give your text field and id like <input name="capacity" type="text" id="text" value="blah blah blah"> document.getElementById['text'].value = "";

answered Sep 27, 2011 at 5:34

Umer Hayat

2,0115 gold badges34 silver badges59 bronze badges

Comments

Nitin Walawalkar · Accepted Answer · 2011-09-27 07:16:27Z

0

This is your html tag. You will need to add a ID to it

<input id="capacity" name="capacity" type="text" value="blah blah blah">

This is just to fire the javascript function

<input type="submit" value="Click" onclick="javascript:return reset();" />

The following function will reset the value of the selected element

<script type="text/javascript" language="javascript">
    function reset() {
        document.getElementById("capacity").value = "";
        return false; // In order to avoid postback
    }   
</script>

If you are not using form and you want to use it with just the name you can try the following

 this.capacity.value = '';

edited Sep 27, 2011 at 7:16

answered Sep 27, 2011 at 5:51

Nitin Walawalkar

395 bronze badges

3 Comments

EMM Over a year ago

+1 for very nicely written answer but capacity is not id, it is name.Will your code work ?

RobG Over a year ago

It's pretty awful really. The language attribute was deprecated over a decade ago, there is no need for "javascript:" in the handler, it is treated as a useless label, returning false from the submit button's click handler will not stop a form submitting. Don't use a submit button if you don't want it to submit the form (change the type to button), etc. The handler could be: this.form.capacity.value = '';

Nitin Walawalkar Over a year ago

Thanks buddy :-), will remember that

Collectives™ on Stack Overflow

How to remove attributes from HTML using javascript?

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related