-1

What I am trying to do is fade out one box once the cross of that box is clicked but carn't seem to get it to work even by googling I got it to work when clicking the div it self by using $(this)but I want it to work when the cross is clicked.

<?php 
require "global.php";
$select_staff = mysqli_query($database_connection,"SELECT * FROM staff_info");

if(!$select_staff) {
die("Database Error");
}

while($staff_info = mysqli_fetch_array($select_staff)) {
$div_id = $staff_info['div_id']; // assuming you have an id field in your DB
$account_name = $staff_info['account_name'];
$position = $staff_info['position'];
$description = $staff_info['description'];
echo "

<div class='staff_boxes' id='staff_boxes_$div_id'> 
 <a href='#' class='delete_button'> X </a>";
echo"
<h2>$account_name</h2>
$position
<p>$description</p>
</div> ";
}
?>

<script>
$( document ).ready(function() {




$('div').click(function() {
var myScript = document.getElementById('myScript');
 $(this).removeAttr('id').fadeOut();
 });








});
</script>








<style>

.staff_boxes {
width: 250px;
min-height: 150px;
border: 4px solid gold;
background:#C2DAD7;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
}

.staff_boxes {
margin-left: 63px;
float: left;
}



/**Clear floats after the boxes**/

</style>

Thanks

Spudster
  • 69
  • 1
  • 11

1 Answers1

1

Target the parent like so:

$('.delete_button').click(function() {
    $(this).parent().fadeOut();
    return false; //Without this the browser may scroll to the top of the page
});
Mikk3lRo
  • 3,477
  • 17
  • 38
  • Thanks a lot mate :D that worked don't know why I didn't try that that's just a simple line of code lol,Might need to do more JQuery tutorial i'm only learning coming from PHP. Voted you up will deserved ;) also i did have return false; in before didn't both to re-add it but should of – Spudster May 14 '14 at 05:41