CODEWITHSUNDEEP
javascriptjqueryhtml
Rupak
Rupak

Reputation: 439

How to remove class of a tag when other button are clicked

The html code is: 

<div style="border:1px solid black;border-radius:10px;padding:3px;">
    <a id="tblBtn" status="10" data-id="1" href="#" class="btn btn-default">10</a>
    <a id="tblBtn" status="2" data-id="2" href="#" class="btn btn-default">2</a>
    <a id="tblBtn" status="1" data-id="3" href="#" class="btn btn-default">1</a>
    <a id="tblBtn" status="3" data-id="4" href="#" class="btn btn-default">3</a>
    <a id="tblBtn" status="12" data-id="5" href="#" class="btn btn-default">12</a>
</div>

And the js is:

$("body div#tablesAvailable div a").click(function () {
    var attrClass = $(this).attr("class");

    if (attrClass == "btn btn-primary") {
        $(this).attr("class", "btn btn-default");
        $("#lblTableNo").html("Table No:");
    }
    if (attrClass == "btn btn-default") {
        newno = $(this).html();
        $("#lblTableNo").html("Table No:" + newno);//replaceWith("<label id='lblTableNo'>Table No:" + newno + "</label>");
        //$("#lblTableNo").append($(this).html());
        $(this).attr("class", "btn btn-primary");
    }  
});

I only need class primary of button which is clicked and remove class primary of previously clicked classes but the code is working for double click of button only.

Upvotes: 3

Views: 635

Answers (2)

Sushil
Sushil

Reputation: 1131

You can't have duplicate ids so try using common class name If you are just trying to toggle the class btn-primary. Try this solution

$("a.btn-default").off().on('click', function() {
  $("a.btn-default").removeClass('btn-primary');
  $(this).addClass('btn-primary');
});
.btn-primary {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border:1px solid black;border-radius:10px;padding:3px;">
  <a status="10" data-id="1" href="#" class="btn btn-default">10</a>
  <a status="2" data-id="2" href="#" class="btn btn-default">2</a>
  <a status="1" data-id="3" href="#" class="btn btn-default">1</a>
  <a status="3" data-id="4" href="#" class="btn btn-default">3</a>
  <a status="12" data-id="5" href="#" class="btn btn-default">12</a>
</div>

I haven't mentioned your other codes such as $("#lblTableNo").html("Table No:"); because I don't have any idea exactly what you're trying to do

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your logic is much more complicated than necessary, I presume because you're trying to work around the issue with dynamically changing the class at runtime means the selectors stop working. A much better way to achieve that is to use a delegated event handler.

Then you can split the events on the buttons by class. You can also use toggleClass() to amend the classes, and you can target the existing .btn-primary elements to remove that class when another is clicked.

Also note that id attributes must be unique. If you need to group elements by behaviour, use a class. I removed the id in the example below as it's irrelevant. In addition, status is not a valid attribute for an a element and would mean your HTML is invalid. If you want to store metadata in an element, use a data attribute, exactly as you are for data-id. Lastly, put CSS in an external stylesheet, not inline.

With all that said, try this:

$('div').on('click', 'a.btn-primary', function() {
  $(this).toggleClass('btn-primary btn-default');
  $("#lblTableNo").html("Table No:");
});

$('div').on('click', 'a.btn-default', function() {
  $('a.btn-primary').add(this).toggleClass('btn-primary btn-default');
  $("#lblTableNo").html("Table No:" + $(this).html());
});
.btn-container {
  border: 1px solid black;
  border-radius: 10px;
  padding: 3px;
}
.btn {
  margin: 5px;
  padding: 5px;
  border: 1px solid #888;
  display: inline-block;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  background-color: #CCC;
  text-decoration: none;
}

.btn-primary {
  color: #EEE;
  background-color: #C00;
  border-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-container">
  <a data-status="10" data-id="1" href="#" class="btn btn-default">10</a>
  <a data-status="2" data-id="2" href="#" class="btn btn-default">2</a>
  <a data-status="1" data-id="3" href="#" class="btn btn-default">1</a>
  <a data-status="3" data-id="4" href="#" class="btn btn-default">3</a>
  <a data-status="12" data-id="5" href="#" class="btn btn-default">12</a>
</div>

<div id="lblTableNo"></div>

Upvotes: 3

Related Questions