Remove XML Node With jQuery

I wonder whether someone may be able yo help me please.

I've put together this page which allows users to view a gallery of their uploaded images.

Upon initial upload, the physical images are saved in the following file structure: UploadedFiles/userid/locationid/image and the details of the image i.e. description etc are saved in an xml file called files.xml which is in the same directory as the physical images.

I'm now working on allowing the user to be able to delete these images.

By way of a deletion icon under each image, I've, admitedly with some help, put together the following which successfully deletes the physical image.

'Deletion Icon Onclick Event'

<script type="text/javascript"> 
    Galleria.ready(function() {
        this.$('thumblink').click();

    $(".galleria-image").append( 
    "<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
    $(".btn-delete").live("click", function(){
    var img = $(this).closest(".galleria-image").find("img"); 

    // send the AJAX request
    $.ajax({
    url : 'delete.php',
    type : 'post',
    data : { image : img.attr('src') },
    success : function(){
    alert('Deleting image... ');
    img.parent().fadeOut('slow');
    }
    });

    return false;
    });

    });

</script>

Original 'delete.php'

<?php

if (!empty($_POST)) {
$image = $_POST['image'];

if (file_exists($image)) {
unlink($image);
} 
}
?>

Updated 'delete.php'

<?php

if (!empty($_POST)) {
$image = $_POST['image'];

if (file_exists($image)) {
unlink($image);
} 
}

$doc = new DOMDocument; 
$doc->load('files.xml'); 

$thedocument = $doc->documentElement; 

$list = $thedocument->getElementsByTagName('files'); 

$nodeToRemove = null; 
foreach ($list as $domElement){ 
$attrValue = $domElement->getAttribute('file_name'); 
if ($attrValue == 'image') { 
$nodeToRemove = $domElement;
} 
} 

if ($nodeToRemove != null) 
$thedocument->removeChild($nodeToRemove); 

echo $doc->saveXML(); 
?>

The problem I'm having is deleting the xml node form the xml file. I've provided an extract of the XML file below.

  <?xml version="1.0" encoding="utf-8" ?> 
- <files>
  <file name="stag.jpg" source="stag.jpg" size="21341" originalname="stag.jpg" description="No description provided" userid="1" locationid="1" /> 
  </files>

I've done quite a bit of research about how to go about this and found that jQuery had it's own command i.e. jQuery.remove which I thought would be able to delete the node. Following the brief tutorial I added the following to the end of my 'Onclick Event' script:

var doc = $(files.xml);
doc.find('file_name:src').remove();

Unfortunately, although I don't receive a specific error, the node isn't being deleted from the file. I'm a complete beginner when it comes to XML so perhaps I'm looking at this too simplistically.

I just wondered wheteher someone could perhaps have a look at this please and let me know where I'm going wrong.

Many thanks and regards

Solution

This is because JavaScript(JQuery) loads the XML DOM in memory and then when you delete a node, it gets deleted from the in-memory xml doc(the object).

It wont be removed from the physical XML file.

JS runs in a sandbox Browser environment and cannot alter local files on the system. and if you are trying to load xml from a remote server then its a very bad idea.

the XML file from remote server is downloaded as temp file and then when you load XML again an in-memory DOM is created and the node is deleted from it.

So in case you want the actual file to be changed, you will need to use AJAX and send some HTTP request to your server to do the same to the physical file.

UPDATE:

Check this tutorial http://www.phpeveryday.com/articles/PHP-XML-Removing-Node-P415.html

and try to load the xml file in your delete.php and remove the corresponding node from it and then save this xml back to the original file which will be overwritten.