CODEWITHSUNDEEP
jqueryhtml
Kissa Mia
Kissa Mia

Reputation: 297

How to remove a tag using jQuery?

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

Upvotes: 0

Views: 55

Answers (4)

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

   $("#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

Upvotes: 0

Furquan Khan
Furquan Khan

Reputation: 1594

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/*"/>

Upvotes: 1

iJade
iJade

Reputation: 23791

fade should be fadeOut

Change 

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

to

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

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

Upvotes: 1

Related Questions