CODEWITHSUNDEEP
jquery
adam78
adam78

Reputation: 10078

jQuery - find element and show or hide

I have the following markup:

<footer class="form__footer">
     <div class="form__actions">
       <div class="form__action form__action--primary">
           <button class="button button--chevron-right button--primary" 
                   name="next" 
                   type="submit" 
                   value="Next">Next
            </button>
       </div>
       <div class="form__action form__action--secondary">
              <button class="button button--chevron-left button--standout" 
                      name="back" 
                      type="submit" 
                      value="Previous">Previous
             </button>
       </div>
    </div>
</footer>

I want show/hide the next button when value of a dropdown changes. The following throws jquery syntax error: Syntax error, unrecognized expression: button, input[type='submit', name='next']

$( "footer.form__footer" ).find("button, input[type='submit', name='next']").hide();

The following hides both buttons:

$( "footer.form__footer" ).find("button, input[type='submit'][ name='next']").hide();

What is the correct syntax to hide only the next button?

Upvotes: 0

Views: 110

Answers (4)

SilverSurfer
SilverSurfer

Reputation: 4365

Since your buttons contains only a certain word you also can use :contains selector to hide only the buttons which contains the word Next:

$("footer.form__footer button:contains('Next')").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<footer class="form__footer">
  <div class="form__actions">
    <div class="form__action form__action--primary">
      <button class="button button--chevron-right button--primary" name="next" type="submit" value="Next">Next
            </button>
    </div>
    <div class="form__action form__action--secondary">
      <button class="button button--chevron-left button--standout" name="back" type="submit" value="Previous">Previous
             </button>
    </div>
  </div>
</footer>

Upvotes: 0

Manoz
Manoz

Reputation: 6617

I assume you are trying to find a button or input element from the DOM. You can try the followings. This will hide matching elements from the target container

$( "footer.form__footer" ).find("button[type='submit'][ name='next'], input[type='submit'][ name='next']").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer class="form__footer">
     <div class="form__actions">
       <div class="form__action form__action--primary">
           <button class="button button--chevron-right button--primary" 
                   name="next" 
                   type="submit" 
                   value="Next">Next
            </button>
       </div>
       <div class="form__action form__action--secondary">
              <button class="button button--chevron-left button--standout" 
                      name="back" 
                      type="submit" 
                      value="Previous">Previous
             </button>
       </div>
    </div>
</footer>

Upvotes: 0

adam78
adam78

Reputation: 10078

It's Ok I've figured it out:

$( "footer.form__footer" ).find("button[name='next']").hide();

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Why you're referencing an input when you have a button, use :

$( "footer.form__footer" ).find("button[name='next']").hide();


setTimeout(function() {
  $("footer.form__footer").find("button[name='next']").hide();
}, 500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<footer class="form__footer">
  <div class="form__actions">
    <div class="form__action form__action--primary">
      <button class="button button--chevron-right button--primary" name="next" type="submit" value="Next">Next
            </button>
    </div>
    <div class="form__action form__action--secondary">
      <button class="button button--chevron-left button--standout" name="back" type="submit" value="Previous">Previous
             </button>
    </div>
  </div>
</footer>

Upvotes: 1

Related Questions