How to add / remove attribute when click

Question

How to add/remove attribute when click?

This is what I tried so far.

$('.btn').click(function() {
  $(this).attr("title", "selected").siblings().removeAttr("title", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

When click button, add attribute "selected" and others remove attribute "selected".

This is DEMO, https://jsfiddle.net/a8egp275/3/

How do I need to fix it? please help.

The .removeAttr() hasn't second parameter.

Mohammad
– Mohammad

2018-09-17 08:17:31 +00:00
Commented Sep 17, 2018 at 8:17 — Mohammad
– Mohammad, Commented Sep 17, 2018 at 8:17

Rory McCrossan · Accepted Answer · 2018-09-17 08:21:50Z

4

The issue is because the .btn elements are not siblings, hence siblings() returns nothing.

To fix this you can use closest() to get the nearest common ancestor, then find() the .btn elements, excluding the one which was clicked. Also note that removeAttr() only requires a single argument; the attribute name to be removed. Try this:

$('.btn').click(function() {
  var $btn = $(this).attr("title", "selected");
  $(this).closest('ul').find('.btn').not($btn).removeAttr('title');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

edited Sep 17, 2018 at 8:21

answered Sep 17, 2018 at 8:16

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Alnitak Over a year ago

your code and text are inconsistent with each other. I personally wouldn't recommend the "clear all .btn" method because there may be others in different parts of the DOM.

Rory McCrossan Over a year ago

@Alnitak you're correct - I changed my mind on my approach while writing the example and forgot to update the description :) I've put it back to how it originally was.

brk · Accepted Answer · 2018-09-17 08:18:16Z

0

You can remove the title attribute from all dom with .btn class and then add the title to the selected element

$('.btn').click(function() {
  $('.btn[title ="selected"').removeAttr("title")
  $(this).attr("title", "selected");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

answered Sep 17, 2018 at 8:18

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Karim Seoudy · Accepted Answer · 2018-09-17 08:19:58Z

0

When you remove the attribute you just specify the name of the attribute
so you need to do as follows:

    $('.btn').click(function() {
        $('.btn').removeAttr("title");
        $(this).attr("title", "selected");
    });

answered Sep 17, 2018 at 8:19

Karim Seoudy

1271 silver badge11 bronze badges

Comments

Adrian Brand · Accepted Answer · 2018-09-17 08:20:09Z

0

Select the current selected with an attribute selector

$('.btn').click(function() {
  $('[title=selected]').removeAttr("title");
  $(this).attr("title", "selected");
});

[title=selected] { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button title="selected" class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
  <li>
    <button class="btn">click</button>
  </li>
</ul>

answered Sep 17, 2018 at 8:20

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Comments

Andrej · Accepted Answer · 2018-09-17 08:39:48Z

You should do something like this:

$('.btn').click(function() {

  //remove the selected attr from all btns
  $('.btn[title]').removeAttr('title');

  //add the title attr to the current btn
    $(this).attr('title', 'selected');

});

https://jsfiddle.net/a8egp275/42/

Note: this code will alwasy have one button selected, if you want this to behave as checkbox rather than radio button, you will need to do something like this:

$('.btn').click(function() {

    //get the attr title and check later if it exist
    var attr = $(this).attr('title');

  //remove the selected attr from all btns
  $('.btn[title]').removeAttr('title');

  //add the attr only if it didnt exist before
  if(typeof attr === typeof undefined || attr === false){
        $(this).attr('title', 'selected');
  }

});

https://jsfiddle.net/a8egp275/45/

Andifined · Accepted Answer · 2018-09-17 08:24:41Z

-1

your event handler is okay. But take a look in the jQuery documentation. It states, that the removeAttr() function only takes the attribute name as a parameter. Also afaik you have to make seperated statements for the add and remove, because the attr() function does not return the jQuery object.

TLDR:

$('.btn').click(function() {
  $(this).attr("title", "selected");
  $(this).siblings().removeAttr("title");
});

Also you need to change your HTML structure if you want to use the siblings() function :)

edited Sep 17, 2018 at 8:24

answered Sep 17, 2018 at 8:18

Andifined

4896 silver badges19 bronze badges

4 Comments

Rory McCrossan Over a year ago

While this is true, it's not the problem

Andifined Over a year ago

@RoryMcCrossan you are right, overlooked the first problem.

Rory McCrossan Over a year ago

Unfortunately, this still has the same problem as the OP

Andifined Over a year ago

@RoryMcCrossan third error found, in the html structure, the buttons are not siblings

Collectives™ on Stack Overflow

How to add / remove attribute when click

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related