CODEWITHSUNDEEP
jquery
Kagimura
Kagimura

Reputation: 417

add attribute in jQuery using class

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

Upvotes: 0

Views: 41

Answers (3)

ambianBeing
ambianBeing

Reputation: 3529

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>

Upvotes: 0

Shiv Patne
Shiv Patne

Reputation: 553

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>

Upvotes: 1

Moob
Moob

Reputation: 16184

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>

Upvotes: 0

Related Questions