Can a containing element affect content functionality?

[WolfShade]

Hello, everyone.

I'm not currently having an issue, but I am trying to understand something. Input is appreciated.

I am using jQuery 1.8, and in one particular document I have set up something that will delete certain files stored within a database. I can't type all the code, here, but I'll try to present an accurate facsimile.

The links to delete a particular file were anchor tags within a span, like so:

<span style="display:block;" id="span_{ unique identifier }">
  <a href="javascript:void;" name="del_{ same unique id }" id="del_{ same unique id }" class="delFile"><img for delete icon /> FILENAME.EXT</a>
</span>

Within document.ready, I had the following:

$('a.delFile').click(function(evt){
  var delID = $(this).attr('id'), spanID = delID.replace(/^del\_/,"span_");
  delID = delID.replace(/^del\_/,"");
  [[ function to delete file by ID ]]
  });

This is working fine in both IE and FF. But something has me perplexed.

I temporarily changed the span tags to paragraph tags, and while it still worked in IE, it stopped working in FF. I reverted back to span tags, and it's working just fine, again. But I'm confused as to why a <p> would prevent the delete function in FF, when <span> had no problem.

Any ideas?

Thank you,

[VIPStephan]

Unless you also changed $('a.delFile') to $('p.delFile') (and any occurrence of “span” to “p”, related to the element type) I see no reason why it wouldn’t work (and differently in Firefox and IE for that matter).

[WolfShade]

Since the functionality for deleting was for the anchor tags and not the containing span/paragraph, the $('a.delFile') was not changed to $('p.delFile').

I'm stumped. I just don't see what I'm missing.

[Old Pedant]

Not to ask a dumb question, but...

$('a.delFile').click(function(evt){
  var delID = $(this).attr('id'), spanID = delID.replace(/^del\_/,"span_");
  delID = delID.replace(/^del\_/,"");
  [[ function to delete file by ID ]]
  })

What is the purpose of the code in red there?

And for that matter, what was the purpose in giving the <span>s an ID in the first place?

Or, turning it around the other way, why do you need *BOTH* the <span> and the <a> tags???

I'm *GUESSING* that after you delete the file you want to hide the <span> or equivalent?

Why not keep it much simpler?

<style>
.delFile {
    display: block;
    /* and any other characteristics desired */
}
</style>
...

<span id="del_{ unique identifier }" class="delFile">
    <img for delete icon /> FILENAME.EXT</a>
</span>

...
$('.delFile').click(
    function()
    {
        var delID = $(this).attr('id').replace(/^del\_/,"");

        [[ function to delete file by delID ]]

        this.style.display = "none";
    }
);

[WolfShade]

I'm using .remove() for the span, once the file is deleted. The spanID variable sets which one.

[Old Pedant]

So why not just do as I suggested and, instead, hide the <span>?

But even if you insist on removing it, I don't see why you need the separate <span> and <a>.

Example:

<style>
.delFile {
    display: block;
    /* and any other characteristics desired */
}
</style>
...

<span id="del_{ unique identifier }" class="delFile">
    <img for delete icon /> FILENAME.EXT
</span>

...
$('.delFile').click(
    function()
    {
        var delID = $(this).attr('id').replace(/^del\_/,"");

        [[ function to delete file by delID ]]

        this.parentNode.removeChild(this);
    }
);

The ID isn't even needed except for purposes of calling to delete the file.

But for that matter, why not forget the id and just do it by the *NAME* of the file?

<span class="delFile">
    <img for delete icon /> FILENAME.EXT
</span>

...
$('.delFile').click(
    function()
    {
        // probably better to remove the <img> node and then get just the text node
        // but this shows the general idea...just extract the filename alone:
        var fname = this.innerHTML.replace(/^\s*\<img[^\>]+\>\s*/i,"");

        [[ function to delete file by file name ]]

        this.parentNode.removeChild(this);
    }
);

[WolfShade]

Originally Posted by Old Pedant

But for that matter, why not forget the id and just do it by the *NAME* of the file?

If the file were stored on the server filesystem, that would be a no brainer. But they are stored in a database, with the content in one table and the file name in another table. Both tables contain the unique ID.

PS. To the mod who moved this into the Frameworks section: Although I am using jQuery, the question, itself, is not a jQuery question.