Question 340491 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Remove attribute from an element using jQuery

I am trying to remove an attribute from an element using jQuery.

HTML code–

<div class="accordion">
  <label>Test 1</label>
  <article style="max-height: inherit">Content 1</article>

  <label>Test 2</label>
  <article>Content 2</article>
</div>

jQuery code –

$(".accordion label").on("click", function(e){
    if($(this).next().attr('max-height')){
        $(this.next()).removeAttr("max-height");
    }
});

It doesn’t trigger the if part. I think I am missing something simple.

Any help is highly appreciated.

Tags:

2

Answers


  1. 0

    max-height isn’t an attribute, it’s a style property inside the style attribute. To remove the style property, you’d either use the DOM standard style property, or jQuery’s css function. (Separately, you also have a typo on the statement inside the if.) I’d use the style property because you’re looking just for the inline value, not the computed value.

    $(".accordion label").on("click", function(e){
    const next = $(this).next()[0]; // Or just: `this.nextElementSibling`
    if (next.style.maxHeight) {
        next.style.maxHeight = "";
    }
});

    Here’s a live example (I’ve changed max-height: inherit to max-height: 2em so it’s easier to see when it’s removed):

    $(".accordion label").on("click", function(e){
    const next = $(this).next()[0]; // Or just: `this.nextElementSibling`
    if (next.style.maxHeight) {
        next.style.maxHeight = "";
    }
});
    <div class="accordion">
    <label>Test 1</label>
    <article style="max-height: 2em">
        Content 1
        <br>x
        <br>y
        <br>z
    </article>

    <label>Test 2</label>
    <article>Content 2</article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    Login or Signup to reply.
  2. 0

    When we use inherit, we should have that attribute set at upper level. Further the JavaScript written may be as under (which is expressive):

    $(".accordion label").on("click", function(e){

    if($(this).next()){
        if ( $(this).next().css('max-height') != 'none'){

            if ($(this).next().css("display") == 'block' ){
                $(this).next().css("display", 'none' )
            } else {
                $(this).next().css("display", 'block' )
            }   
        } 
    }

});
    label {
    display:block;
}
    <div class="accordion" style="max-height: 15px;">
    <label>Test 1</label>
    <article style="max-height: inherit;">Content 1</article>

    <label>Test 2</label>
    <article>Content 2</article>
</div>


<script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous">
</script>

    and CSS for label may be set to display:block

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search