Affecting Single Element with jQuery

Question

Hello Everyone.

What I'm trying to do is when in my function user will hover over .yell-button then .yell-box-txt will disappear.

The only problem is that I have more then one buttons on the site and whenever I'll hover over one of them all text fields are disappearing.

this is my function:

$('.yell-button').hover(function(){

     $('.yell-box-txt').remove()

})

Thank you for your help in advance

Answer 1

Classes are, by definition, accessors for, potentially, multiple elements. If you want to access this element on its own, consider using an id and accessing it via $('#idname')

Answer 2

$('.yell-button:first').hover(function(){
     $('.yell-box-txt').remove();
})

Of course it'd be better to make sure to only use this class once. It would be even better to use an ID instead, which is supposed to be unique (of course it's up to you and you have to check your code for inconsistencies such as multiple elements with the same id)

Answer 3

Without knowing your markup, I'd suspect that your .yell-box-txt is in the same block as your .yell-button. So for markup like this:

<div>
    <a class="yell-button">text button</a>
    <span class="yell-box-txt">text</a>
</div>

you'd want to use something like this:

$('.yell-button').hover(function() {
    $(this).closest('div').find('.yell-box-txt').remove();
});

Answer 4

Example of using id and class

JS

    $('.yell-button').hover(function(){
  $('#box2.yell-box-txt').remove()
    })

HTML

  <div id ="box1" class="yell-box-txt">Text in box 1</div>
  <div id ="box2" class="yell-box-txt">Text in box 2</div>
  <div id ="box3" class="yell-box-txt">Text in box 3</div>

Answer 5

As others said, without an idea of your markup it's difficult to help you, however here are some ways to do it, depending on your markup:

Ideally, you would be able to assign each button and associated text-box a unique identifier like yell-button-1 and make it remove the associated yell-box-txt-1 on hover.

However, this method might be "difficult" to implement because you need to retrieve the ID # from the button.

The second way to do this is to make use of jQuery traversing. Find where the text box is in relation to the button and navigate from the button to the text box using methods such as parent(), siblings(), etc. To make sure you only receive one element, append :first to your .yell-box-txt class.

More info about jQuery Traversing.

Hope this helps!