jQuery to replace contents of a

Question

I have a link that wired up to a jQuery function. It is inside an <li> with another link. Code here:

<li id="aps_pdf1">
   <a target="_blank"" href="....">1testpdf.pdf</a>
      <span style="padding-left:40px">
           <a id="delete-aps_pdf1" class="delete_pdf" title="Delete this PDF." href="#">Delete</a>
      </span>
</li>

I'm trying to replace the first link with a file upload control when the delete-aps_pdf1 is clicked by replacing the html with jQuery. Here's what I have so far with my code:

jQuery(document).ready(function($) {
    $('.delete_pdf').each(function(i,e) { //grab the link class delete-pdf
        var id = $(this).attr('id').replace(/delete-/, '');
        var li = $(this).closest('li').attr('id');
        $(this).click(function(){
            //alert('Clicked! '+ id);//$(this).attr('id'));  //THIS WORKS WHEN CLICKED
            //alert(li);
            $(li).replaceWith('<input type="file" style="width: 700px;" name="' + id + '" id="' + id + '" />');

        });
    });

My replaceWith doesn't seem to be working at all. I'm relatively new with jquery and I've done this reading documentation so I'm sure I'm missing something somewhere.

A step in the right direction would be greatly appreciated!

score 3 · Accepted Answer · answered Dec 05 '12 at 18:14

You're trying to replace a string. Pass the jQuery object instead:

jQuery(document).ready(function($) {
$('.delete_pdf').each(function(i,e) { //grab the link class delete-pdf
    var id = $(this).attr('id').replace(/delete-/, '');
    var li = $(this).closest('li');
    $(this).click(function(){
        //alert('Clicked! '+ id);//$(this).attr('id'));  //THIS WORKS WHEN CLICKED
        //alert(li);
        $(li).replaceWith('<input type="file" style="width: 700px;" name="' + id + '" id="' + id + '" />');

    });
});

Ahhh I see! I was grabbing the ID as a string and not the actual element. This makes perfect sense and worked! THANK YOU! — ItsPronounced, Dec 05 '12 at 18:32

score 0 · Answer 2 · answered Dec 05 '12 at 18:15

0

You are getting the li id (.attr("id")) which means that you need to concatenate a # on the front of your other query

$('#'+li).replaceWith('<input type="file" style="width: 700px;" name="' + id + '" id="' + id + '" />');

answered Dec 05 '12 at 18:15

Paul Sullivan

2,865
2
19
25

or you could do as Michael Berkompas stated (which basically means you get a reference to the actual DOM element stored in li which means you can just do $(li).replaceWith or probably just li.replaceWith – Paul Sullivan Dec 05 '12 at 18:17

score 0 · Answer 3 · answered Dec 05 '12 at 18:17

0

Could you just grab the parent li with:

var li = $(this).parent('li');

answered Dec 05 '12 at 18:17

dewyze

979
1
7
21

That's the first thing I tried, it would return `[object Object]`. – ItsPronounced Dec 05 '12 at 18:28
Oh I see, I'm grabbing the object, not the ID, that makes sense :) – ItsPronounced Dec 05 '12 at 18:33

score 0 · Answer 4 · answered Dec 05 '12 at 18:23

0

You have a mistake in the following line

var li = $(this).closest('li').attr('id');

It should be

var li = $(this).closest('li');

or

var li = $(this).closest('li#' + id);

answered Dec 05 '12 at 18:23

pxx

259
1
8

jQuery to replace contents of a

4 Answers4