Passing php variable to jquery

Question

  for($v=0;$v<11;$v++) {
              echo "<div class='unsubscribed'><a class='button'>Unsubscribe</a></div>";
    echo "<div id='$v'></div>";
        }

I want onclick of the class unsubscribed to remove the div below in the same iteration. So for this i have to pass $v to jquery.

This is what i started with jquery but i don't know how to get the variable $v. How do i accomplish this?

$.ready(
function() {
$('.unsubscribed').remove();
}
);

possible duplicate of: http://stackoverflow.com/questions/7141860/passing-variables-from-php-to-javascript — JMax, Sep 02 '11 at 09:19
no its not since its an loop what he needs is probably a jquery selector that uses this and find parent or something — Breezer, Sep 02 '11 at 09:23

gion_13 · Accepted Answer · 2011-09-02T09:49:53.547

5

you do not need to pass anything to jquery :

$(document).ready(function(){
    $('.unsubscribed').one('click',function(){
        $(this).next().remove();
    });
});

This works for your current html.
To be more safe, you should add a class to the elements you want to be removed:

 for($v=0;$v<11;$v++) {
     echo "<div class='unsubscribed'><a class='button'>Unsubscribe</a></div>";
     echo "<div class='to_be_removed'></div>";
 }

This way you can reference the div you want to remove withouth it being necessarily after the unsubscribed div :

$(document).ready(function(){
    $('.unsubscribed').one('click',function(){
        $(this).next('.to_be_removed').remove();
    });
});

edited Sep 02 '11 at 09:49

answered Sep 02 '11 at 09:21

gion_13

41,171
10
96
108

thanks for this but in my code there are other elements inbetween, i would need to identify the div by the id. Next() wouldn't work. – user892134 Sep 02 '11 at 09:26
even if i add a class that means there will be 10 divs with the class name '.to_be_removed'. I only want to remove the div on the same iteration of the unsubscribed div clicked on. if i remove by class that means 10 divs will disappear. – user892134 Sep 02 '11 at 09:32
ok.. updated again. It will remove once only the next sibling with the specified class. – gion_13 Sep 02 '11 at 09:35

Quasdunk · Answer 2 · 2011-09-02T09:36:11.750

A better solution might be:

<?php for($v=0;$v<11;$v++) { ?>
  <div class="unsubscribed" rel="<?php echo $v; ?>">
     <a class='button'>Unsubscribe</a>
  </div>
  <div id="<?php echo $v; ?>"></div>
<?php } ?>

$(document).ready(function(){
    $(".unsubscribed").click(function(){
        var div_to_remove = $(this).attr("rel");
        $('#'+div_to_remove).remove();
    });
});

I prefer doing it this way, because working with .next can sometimes cause problems, when you add something in between. It can be very hard to find the problem then.

This way, you simply embed the needed information about the div you want to remove into an attribute of the div that triggers the event.

Note: in this example, the function is called on clicking the .unsubscribed div - not the .button.

You also have to make sure, the removable divs have different and unique ids. If $v isn't unique, you can do e.g. something like this:

...
<div id="<?php echo $v . $i; ?>"></div>
...

Passing php variable to jquery

2 Answers2