I need to remove an attribute from an element after it is clicked with JavaScript

Question

I am a begginer in JavaScript and I have this problem: HTML code:

<textarea class="text_input" cols="40" rows="1" onclick="init_area();"></textarea>
<textarea class="text_input" cols="40" rows="1" onclick="init_area();"></textarea>

I want that when a user clicks on this textarea element to remove cols attribute for example. But only for the element that is clicked. I dont know how to do that. Can you help, please?

A tip: this in an eventhandler function refers to the element which an event has been attahed to. — Teemu
– Teemu, Commented Sep 4, 2015 at 15:10
@Teemu: But only if the event was bound using JavaScript. An onclick attribute is handled a little differently. I think he'd have to do: onclick="init_area(this);". I haven't used onclick attributes in forever since they are bad practice. — gen_Eric
– gen_Eric, Commented Sep 4, 2015 at 15:12
I tried : function init_area() { this.removeAttribute("cols"); } — Omkogaion Marius
– Omkogaion Marius, Commented Sep 4, 2015 at 15:13
@RocketHazmat You're right, with inline handlers this-value has to be passed (as well as event object). — Teemu
– Teemu, Commented Sep 4, 2015 at 15:13

QuentinG · Accepted Answer · 2015-09-04 15:17:55Z

1

You need to use this method : removeAttribute()

<textarea class="text_input" cols="40" rows="1" onclick="init_area();this.removeAttribute('cols'); "></textarea>

answered Sep 4, 2015 at 15:17

QuentinG

1012 silver badges11 bronze badges

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

Comments

sebbulon · Accepted Answer · 2015-09-04 15:13:14Z

0

try this.removeAttribute(cols) within your function - this refers to the element that the onclick event is attached to as long as init_area() is only called from your text area.

answered Sep 4, 2015 at 15:13

sebbulon

6237 silver badges21 bronze badges

2 Comments

Omkogaion Marius Over a year ago

<textarea class="text_input" cols="40" rows="1" onclick="init_area(this);"></textarea> and the function function init_area() { this.removeAttribute(cols); } setTimeout(init_area,1000); But I get an error in the console Uncaught TypeError: this.removeAttribute is not a function I am lost

Teemu Over a year ago

Your function doesn't take any arguments, use function init_area(el) {el.removeAttribute(...);}

Kris · Accepted Answer · 2015-09-04 15:17:53Z

0

HTML:

<textarea class="text_input" cols="40" rows="1" onclick="init_area(event);"></textarea>
<textarea class="text_input" cols="40" rows="1" onclick="init_area(event);"></textarea>

And in your JS file:

init_area = function(event) {
  event.target.removeAttribute("cols");
}

But you should try to remove the function call from the HTML Element and move it into the JS File:

yourElement.addEventListener(eventName, eventHandler);

https://developer.mozilla.org/en-US/docs/Web/Events/click

answered Sep 4, 2015 at 15:17

Kris

8281 gold badge9 silver badges20 bronze badges

1 Comment

Omkogaion Marius Over a year ago

Thank you all for your answers. Solution for me to this was Kris solution. init_area = function(event) { event.target.removeAttribute("cols"); } I understand now how it works, and it work in Chrome. I didnt test it on other browser but thanks so much for your answer

Collectives™ on Stack Overflow

I need to remove an attribute from an element after it is clicked with JavaScript

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related