使用jQuery从标签中删除类时遇到问题

Question

I have few div box that looks like this, they all are like productholder2 , productholder3 etc. This is one of them:

 <div class="productholder1>  
    <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   tempor incididunt</p>     
    <input type="button" value="Läs mer" class="button">                                               
</div>

What I want to achieve is to remove this hidden class on the <p> tag by using jQuery.

Somehow I need to specify that it's the productholder1 's <p> class I want to remove so the text pops up since in the CSS I have .hidden{display:none); by removing the class the text should pop up.

I have tried this following jQuery that I made but it doesn't work. What am I doing wrong?

<script type="text/javascript">
   $(document).ready(function () {
       $(".button").click(function () {
           $('.productholder1').removeClass("hidden");
       });
   });
</script>

Answer 1

The hidden class is is on the <p> element not the <div> element which is what you're currently selecting, so you would want to use a selector of '.productholder1 p' to grab it and remove the class. If you only want <p> elements immediately below the product holder div, you can use this selector '.productholder1 > p' as well.

<script type="text/javascript">
   $(document).ready(function () {
       $(".button").click(function () {
           $('.productholder1 p').removeClass("hidden");
       });
   });
</script>

Some other options -

1. All <p> elements with a hidden class immediately below a <div>
   1. $('div > p.hidden')
2. Multiple selectors with a <p> below
   1. $('.productholder1 p, .productholder2 p, .productholder3 p')

Answer 2

The hidden class is on a child of .productholder1 , not on the element itself. It's also a sibling of the button.

This line will remove that class from any (descendent) element of .productholder1 that has that class. For efficiency, it'll completely ignore any element that isn't already hidden:

$('.productholder1 .hidden').removeClass('hidden');

However - I think your plan was that each button only affects the elements that are in the same group? If so, use this instead, which relies on just traversing the DOM hierarchy rather than there being a particular class on each group.

$(".button").click(function () {
    $(this).parent().find('.hidden').removeClass('hidden');
});

This one chunk of code will then work for every group of elements, without you having to duplicate it for each class .productholderNNN .

FWIW, using numbered classes to represent the individual members of groups of otherwise identical DOM structures is actually a mis-use of CSS classes. That's what IDs are for. Classes are supposed to represent groups of elements that should be treated identically.

Answer 3

its should like

  $('.productholder1').find("p").removeClass("hidden");

or

$('.productholder1 p').removeClass("hidden");

what you are trying to do is removing the class in .productholder1 but the classs hidden is not there so you need to select the .productholder1 to grab it

Answer 4

Try this code:

   <script type="text/javascript">
           $(document).ready(function () {
               $(".button").click(function () {
                   $('.productholder1 p').removeClass("hidden");
               });
           });
        </script>

or

 <script type="text/javascript">
               $(document).ready(function () {
                   $(".button").click(function () {
                       $('.productholder1').find('p').removeClass("hidden");
                   });
               });
            </script>