Question

I’m a stuck with the following function:

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){


     if (document.getElementById($childDiv)) {    
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);
          parent.removeChild($child);
     }
}
</script>

<a href=\"javascript:;\" onClick=\"removeElement('$parent','$child');\">x</a>

This function deletes a child element, and its content, which works great client-side! But I am wanting to pass a value to the server, in the same instance, so the content of the element can be deleted from the mysql database too. I have no idea how to do this, so any suggestions will be very appreciated!

Notes: $child, and $parent are strings generated within the php file, that I use to give each element a unique ID.

Answer 1

To make your life easier, use jQuery or similar framework. Here’s how you would do it in jQuery:

$(function() {
    $('.delete').click(function() {
        var link = $(this);
        var id = link.attr('id').replace('element_', '');
        $.ajax({
            url: 'handler.php',
            data: {
                element: id
            },
            type: 'post',
            success: function() {
                link.remove();
                // Or link.closest('tr').remove() if you want to remove a table row where this link is
            }
        });
        return false;
    });
});

The HTML:

<a href="#" class="delete" id="element_20">Remove</a>

And handler.php:

mysql_query("DELETE FROM `table` WHERE id = '".mysql_real_escape_string($_POST['element'])."'");

Always remember to escape database input!

If you’re a total noob as you said, you probably won’t understand all of this so I suggest you read something about jQuery’s AJAX capabilities and about overall development using jQuery or similar JavaScript framework.