Passing php variable to jquery - php

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();
}
);

Answer 1

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();
});
});

Answer 2

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>
...