Question

Header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://mysite.com/public/delete.js" type="text/javascript"></script>

View:

<ol>
<?php foreach($sqlplaces->result() as $place): ?>
 <li id="place-<? echo $place->id; ?>">
  <h3><?php echo anchor('/home/one/place/'.$place->id.'/'.$place->userid.'/'.$place->name,  $place->name); ?>
   <span style="float:right;"><a class="delete" id="<? echo $place->id; ?>" href="#"><img src="<? echo base_url(); ?>images/database_close_32.png" alt="Delete" /></a></span>
  </h3>
 </li>
<?php endforeach; ?>
</ol>

delete.js:

$(document).ready(function() {

    $("a.delete").live('click', function() {
            var deleteId = $(this).attr('id');
            $("li#place-" + deleteID).addClass("hide");

            $.post(base_url + "index.php/home/delete", { delid : deleteId }, function(data)
            {
                    alert(data);
            }, "json");

    return false;
             });


});

I am trying to hide the <li id="place-<? echo $place->id; ?>"> element but I can’t figure out why Uncaught ReferenceError: deleteID is not defined shows up. If I remove $("li#place-" + deleteID).addClass("hide");, deleteID is passed to $post and the entry is removed from the database.

Answer 1

It’s because you misspelled deleteID, JavaScript variables are case-sensitive. You declare it deleteId with a lower-case d.

This should do it:

$("li#place-" + deleteId).addClass("hide");