jQuery select data attribute and hide

Question

I have a button which has an ID, on click of the button I need to match the ID of the button with the documents data-id attribute and then add a class to the respective element.

JS Fiddle

this.$('.add-resource').click(function() {
  var testId = $(this).attr('id');
  alert(testId);
  $('#layoutCanvas').find("[data-id='" + testId + "']").addClass('hidden');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-primary add-resource" id="567">Button</a>
<div id="layoutCanvas">
  <div data-id="567">
    Test 1
  </div>

  <div data-id="235">
    Test 2
  </div>
</div>

your code is working fine

ellipsis
– ellipsis

2019-01-28 09:18:09 +00:00
Commented Jan 28, 2019 at 9:18 — ellipsis
– ellipsis, Commented Jan 28, 2019 at 9:18

Patrick Schocke · Accepted Answer · 2019-01-28 09:24:52Z

4

Your .hidden class is not defined, so the class is added, but no css is applied.

I've only added the .hidden class

this.$('.add-resource').click(function () {
     var testId = $(this).attr('id');
     //alert(testId);
     $('#layoutCanvas').find("[data-id='" + testId + "']").addClass('hidden');
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary add-resource" id="567">Button</button>


<div id="layoutCanvas">
    <div data-id="567">
        Test 1
    </div>
    
    <div data-id="235">
        Test 2
    </div>
</div>

edited Jan 28, 2019 at 9:24

answered Jan 28, 2019 at 9:18

Patrick Schocke

1,4912 gold badges15 silver badges25 bronze badges

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

Comments

Shubham Dixit · Accepted Answer · 2019-01-28 09:27:08Z

Well to modify a bit you can use template literals to overcome the dirtiness of string concat,its just a add on

this.$('.add-resource').click(function () {
     var testId = $(this).attr('id');
     //alert(testId);
   $("#layoutCanvas").find(`[data-id='${testId}']`).addClass('hidden')
     
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<a class="btn btn-primary add-resource" id="567">Button</a>
<div id="layoutCanvas">
    <div data-id="567">
        Test 1
    </div>
    
    <div data-id="235">
        Test 2
    </div>
</div>

<style>
.hidden{
  //attribute you want to add
 
}
</style>

PMerlet · Accepted Answer · 2019-01-28 10:47:37Z

0

hide() method hides the selected elements in jQuery :

this.$('.add-resource').click(function () {
     var testId = $(this).attr('id');
     alert(testId);
     $('#layoutCanvas').find("[data-id='" + testId + "']").hide();
});

edited Jan 28, 2019 at 10:47

PMerlet

2,5944 gold badges25 silver badges42 bronze badges

answered Jan 28, 2019 at 9:32

Rakesh Dhamejani

1097 bronze badges

Collectives™ on Stack Overflow

jQuery select data attribute and hide

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