add attribute in jQuery using class

Question

I was able to add the attribute tab index using the id like this:

 $("#idname").attr("tabindex", "0");

but when I tried it with class

 $(".classname").attr("tabindex", "0");

it doesn't work

"I want to remove a button thats within a couple of divs" - and what's not working? What's your question? Kudos for adding your code, although the .dashboard-container and #multi-reports both appear to be missing from your html, but it's not clear what you need help with. — David Thomas
– David Thomas, Commented Feb 6, 2020 at 18:12
That button is only in one div (not a couple). If you intend for it to be in more than one div you'll need to ensure it has a unique id (duplicates are not allowed). Consider using a class instead. — Moob
– Moob, Commented Feb 6, 2020 at 18:18

Shiv Patne · Accepted Answer · 2020-02-06 18:22:37Z

1

Use below code. I am highlighting container in grey, click anywhere on that grey area and button will be removed.

$( document ).ready(function() {
  $(".container").on("click", function(e) {
        $("#go-back").remove();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" style="background:grey">
  <div class="reports">
    <div class="header">
      <button id="go-back">
          <i class="fas fa-chevron-left" aria-hidden="true"></i>Go Back
      </button>
    </div>
  </div>
</div>

answered Feb 6, 2020 at 18:22

Shiv Patne

5433 silver badges10 bronze badges

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

Comments

Moob · Accepted Answer · 2020-02-06 18:22:09Z

0

What you have should work:

$(function() {//document ready
  $(".dashboard-container").on("click", "#multi-reports", function(e) {
    $("#go-back").remove();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard-container">
  <button id="multi-reports">
       Click to remove
</button>
</div>


<div class="reports">
  <div class="header">
    <button id="go-back">
        <i class="fas fa-chevron-left" aria-hidden="true"></i> Go Back
      </button>
  </div>
</div>

answered Feb 6, 2020 at 18:22

Moob

16.5k1 gold badge40 silver badges54 bronze badges

Comments

ambianBeing · Accepted Answer · 2020-02-06 18:30:31Z

0

A solution with pure JS: Note the click event is on the multi-reports button and not the div

document.getElementById("multi-reports").addEventListener("click", () => {
    let element = document.getElementById("go-back");
    if(element){
      element.parentNode.removeChild(element);
    }
});

<div class="dashboard-container">
   <button id="multi-reports">
   Click to remove
   </button>
</div>
<br>
<div class="reports">
   <div class="header">
      <button id="go-back">
      <i class="fas fa-chevron-left" aria-hidden="true"></i> Go Back
      </button>
   </div>
</div>

answered Feb 6, 2020 at 18:30

ambianBeing

3,5492 gold badges17 silver badges28 bronze badges

Collectives™ on Stack Overflow

add attribute in jQuery using class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related