How to remove a tag using jQuery?

Question

I have a <div> tag

         <ul id="userpic" class="user pic">
           <im class="pict"/>
              Picture preview
         </ul>

          <div id="showpicname">
               <div id="delpc"></div>
               <div id="picnam"></div>
          </div>

and a jQuery function to remove delpc and picnam:

$("#delpc").click(function () {
    $(".pict").hide().fade(slow);
    $("#delpc").hide().fade(slow);
    $("#picnam").hide().fade(slow);
});

<input id="browse"  type="file" name="upl"  onchange="preview(this)" accept="image/*"/>

I am able to hide pict but unable to hide picnam and delpc and deselect the file selected by id="browse"

What am I doing wrong here? I am using the same method as hiding the class=pict img.

I have tried all the possible ways but no luck.

Help me out here please.

Thanks

`$().fade` does not exist, your script throws when attempting to call it for the first time. Check the JS console. — Fabrício Matté, Jan 30 '14 at 07:55
@FabrícioMatté thanks a lot buddy, that works, I have removed the fade, but how to deselect the selected file ? — Kissa Mia, Jan 30 '14 at 07:59

Furquan Khan · Answer 1 · 2014-01-30T08:04:15.623

1

See this fiddle:

Working Fiddle

And here goes the code:

JS:

$(function() {
    $("#delpc").click(function () {
         $(".pict").fadeOut("slow");
         $("#delpc").fadeOut("slow");
         $("#picnam").fadeOut("slow");

    });
});

OR // no need to use both hide and fadeout

$(function() {
    $("#delpc").click(function () {
         $(".pict").hide();
         $("#delpc").hide();
         $("#picnam").hide();

    });
});

HTML:

     <ul id="userpic" class="user pic">
       <im class="pict"/>
          Picture preview
     </ul>

      <div id="showpicname">
           <div id="delpc">delete</div>
           <div id="picnam">picnam</div>
      </div>
     <input id="browse"  type="file" name="upl"  onchange="preview(this)" accept="image/*"/>

edited Jan 30 '14 at 08:04

answered Jan 30 '14 at 07:58

Furquan Khan

1,586
1
15
30

`hide()` is executed before the `fadeOut()`. Why execute both these? Either hide it instantly, or fade it out. – timo Jan 30 '14 at 08:02
You're still hiding them before the `fadeOut()`is completed. After the fadeOut is completed, the elements are hidden anyway, so the `hide()` is obsolete. Even though it is in OP original code. Just go with http://jsfiddle.net/k4F6H/7/ – timo Jan 30 '14 at 08:07

score 1 · Answer 2 · answered Jan 30 '14 at 07:59

1

You should be using .fadeOut().You will not even need to hide it.:

$(".pict").fadeOut('slow');
$("#delpc").fadeOut('slow');
$("#picnam").fadeOut('slow');

answered Jan 30 '14 at 07:59

Milind Anantwar

81,290
25
94
125

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

   $("#delpc").click(function () {
        $(".pict").fadeOut("slow", function () {
            $(this).hide();
        });
        $("#delpc").fadeOut("slow", function () {
            $(this).hide();
        });
        $("#picnam").fadeOut("slow", function () {
            $(this).hide();
        });

    });

refer this for resetting the file browser

edited May 23 '17 at 11:44

Community

1
1

answered Jan 30 '14 at 07:59

Anoop Joshi P

25,373
8
32
53

Thanks this one is nice, but I was wondering how to deselect the selected file by the tag, should I remove the file from the fake path ? or there is any other efficient way ? – Kissa Mia Jan 30 '14 at 08:13

score 0 · Answer 4 · answered Jan 30 '14 at 08:00

0

fade should be fadeOut

Change

$("#delpc").hide().fade(slow);
$("#picnam").hide().fade(slow);

to

$("#delpc").hide().fadeOut("slow");
$("#picnam").hide().fadeOut("slow");

answered Jan 30 '14 at 08:00

iJade

23,144
56
154
243

You do not need hide. fadeOut eventually hides the element. – Milind Anantwar Jan 30 '14 at 08:13

How to remove a tag using jQuery?

4 Answers4