views:

51

answers:

2

i have a problem with this jquery, in the success function call, its mean to remove the `support' button, and fade in the msg, this is my jquery code:

$('.stats').delegate('.against', 'click', function(e) {
      //stop event
      e.preventDefault();
        // cache a reference to the previous <li> element
        //   since it is used more than once
       var $prevLi = $(this).closest('li').prev('li');
      //get the id
       var the_id = $prevLi.attr('id').split('_').pop();
        //the main ajax request
       $.ajax({
           context:this,
           type: "POST",
           data: "action=against&id=" + the_id,
           url: "ajax/sa.php",
          success: function (msg) {
               $prevLi.find("h2.score_down").html(msg).fadeIn();
               $(this).closest('li').next().next().find('button').remove(); $(this).remove();
           }
      });
 });

the html:

        <ul class="stats">
             <li id="topic_20" class="score">
                     <h2 class="score_up" style="color:green;">10</h2>
                <span style="text-align:center;">Supporters</span>
            </li>
            <li>
                <button type="submit" value="Actions" class="support" title="support">
                    <i></i>
                    <span>Support</span>
                </button>
            </li>


              <li id="down_20"class="score"><h2 class="score_down">20</h2><span style="text-align:center;">Against</span>

    </li>

              <li>
        <button type="submit" value="Actions" class="against" title="against">
          <i></i><span>Against</span></button>
              </li>
        </ul>
<h3 class="success"></h3>

this jquery is meant to remove the support button, when clicked and the new score is meant to fade in! :)) thanks

+2  A: 

The button is in the <li> 2 previous to the .against containing one, so your .next() calls should be .prev(), like this:

$(this).closest('li').prev().prev().find('button').remove();
Nick Craver
cheers your a genious, can i just ask you one more question, in the success how can i add a message attached to the `<h3 class="success">successful click</h3>`, so basically after the user clicks they get this messsage for feedback!! cheers :)) +upvote from me
getaway
@getaway - where in the markup do you want the `<h3>` to go?
Nick Craver
changed my code :))
getaway
@getaway - you can't have it there, a `<h3>` isn't a valid child of a `<ul>` (so be sure to wrap it in a `<li>`). If the `<ul>` is complete though you can just search within it: `$(this).closest('ul').find('.success').html(message);` (you could use this same closest/find for the `<button>` as well).
Nick Craver
@nick sorry i changed the code again, i was meant to have outside, i need go sleep lol
getaway
A: 

Why not use $("button[type=submit]")? Or just $("button")? If you use the double prev() you're going to have to adjust your code when your markup changes. If you do that often enough, that makes making changes a nightmare later.

apphacker
Your solution would remove *all* buttons, not the one related to the one that was clicked, what if there are 40 of these `<ul class="stats">` on the page? :)
Nick Craver
@apphacker @nick so do you think its better to change, or leave it as
getaway
If he has 40 of these buttons and he's using prev().prev() then his code/markup is horrible.
apphacker