How to fadeOut remove a div in jQuery

Question

I m trying to give fadeout effect to a div  amp  delete that div id    notification    when an image is clicked   This is how I m doing that    lt a onclick      notification   fadeOut 300 function         notification   remove         class  notificationClose   gt  lt img src  close png   gt  lt  a gt    This seems to not be working  What do I need to do to fix this

User · Answer

fadeOut  slow   this remove

User · Answer

If you re using it in several different places  you should turn it into a plugin   jQuery fn fadeOutAndRemove   function speed         this  fadeOut speed function              this  remove               And then      Somewhere in the program code     div   fadeOutAndRemove  fast

User · Answer

you really should try to use jQuery in a separate file  not inline   Here is what you need    lt a class  notificationClose   gt  lt img src  close png   gt  lt  a gt    And then this at the bottom of your page in  lt script gt  tags at the very least or in a external JavaScript file       notificationClose   click function             notification   fadeOut  normal   function               this  remove

User · Answer

Have you tried this       notification   fadeOut 300  function           this  remove          That is  using the current this context to target the element in the inner function and not the id  I use this pattern all the time - it should work

User · Answer

Use    fadeOut 360  delay 400  remove

User · Answer

Try this    lt a onclick      notification   fadeOut 300  function       this  remove         class  notificationClose   gt  lt img src  close png   gt  lt  a gt    I think your double quotes around the onclick were making it not work      EDIT  As pointed out below  inline javascript is evil and you should probably take this out of the onclick and move it to jQuery s click   event handler  That is how the cool kids are doing it nowadays

User · Answer

if you are anything like me coming from a google search and looking to remove an html element with cool animation  then this could help you    x000D   x000D    document  ready function     x000D       x000D      var  deleteButton       deleteItem    x000D   x000D       deleteButton on  click   function event    x000D       x000D          event preventDefault    x000D   x000D          var  button     this   x000D   x000D          if confirm  Are you sure about this        x000D   x000D              var  item    button closest  tr item    x000D   x000D               item addClass  removed-item   x000D   x000D                   one  webkitAnimationEnd oanimationend msAnimationEnd animationend   function e    x000D   x000D                        this  remove    x000D                  x000D            x000D         x000D          x000D       x000D      x000D      x000D     Credit to Sara Soueidan x000D      link https   github com SaraSoueidan creative-list-effects blob master css styles-3 css x000D      x000D   x000D   removed-item   x000D      -webkit-animation  removed-item-animation  8s cubic-bezier  65 -0 02  72  29   x000D      -o-animation  removed-item-animation  8s cubic-bezier  65 -0 02  72  29   x000D      animation  removed-item-animation  8s cubic-bezier  65 -0 02  72  29  x000D    x000D   x000D   keyframes removed-item-animation   x000D      0    x000D          opacity  1  x000D          -webkit-transform  translateX 0   x000D          -ms-transform  translateX 0   x000D          -o-transform  translateX 0   x000D          transform  translateX 0  x000D        x000D   x000D      30    x000D          opacity  1  x000D          -webkit-transform  translateX 50px   x000D          -ms-transform  translateX 50px   x000D          -o-transform  translateX 50px   x000D          transform  translateX 50px  x000D        x000D   x000D      80    x000D          opacity  1  x000D          -webkit-transform  translateX -800px   x000D          -ms-transform  translateX -800px   x000D          -o-transform  translateX -800px   x000D          transform  translateX -800px  x000D        x000D   x000D      100    x000D          opacity  0  x000D          -webkit-transform  translateX -800px   x000D          -ms-transform  translateX -800px   x000D          -o-transform  translateX -800px   x000D          transform  translateX -800px  x000D        x000D    x000D   x000D   -webkit-keyframes removed-item-animation   x000D      0    x000D          opacity  1  x000D          -webkit-transform  translateX 0   x000D          transform  translateX 0  x000D        x000D   x000D      30    x000D          opacity  1  x000D          -webkit-transform  translateX 50px   x000D          transform  translateX 50px  x000D        x000D   x000D      80    x000D          opacity  1  x000D          -webkit-transform  translateX -800px   x000D          transform  translateX -800px  x000D        x000D   x000D      100    x000D          opacity  0  x000D          -webkit-transform  translateX -800px   x000D          transform  translateX -800px  x000D        x000D    x000D   x000D   -o-keyframes removed-item-animation   x000D      0    x000D          opacity  1  x000D          -o-transform  translateX 0   x000D          transform  translateX 0  x000D        x000D   x000D      30    x000D          opacity  1  x000D          -o-transform  translateX 50px   x000D          transform  translateX 50px  x000D        x000D   x000D      80    x000D          opacity  1  x000D          -o-transform  translateX -800px   x000D          transform  translateX -800px  x000D        x000D   x000D      100    x000D          opacity  0  x000D          -o-transform  translateX -800px   x000D          transform  translateX -800px  x000D        x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt JS Bin lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D     x000D     lt table class  table table-striped table-bordered table-hover  gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt id lt  th gt  x000D           lt th gt firstname lt  th gt  x000D           lt th gt lastname lt  th gt  x000D           lt th gt  twitter lt  th gt  x000D           lt th gt action lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         x000D         lt tr class  item  gt  x000D           lt td gt 1 lt  td gt  x000D           lt td gt Nour-Eddine lt  td gt  x000D           lt td gt ECH-CHEBABY lt  td gt  x000D           lt th gt    chebaby lt  th gt  x000D           lt td gt  lt button class  btn btn-danger deleteItem  gt Delete lt  button gt  lt  td gt  x000D         lt  tr gt  x000D         x000D         lt tr class  item  gt  x000D           lt td gt 2 lt  td gt  x000D           lt td gt John lt  td gt  x000D           lt td gt Doe lt  td gt  x000D           lt th gt  johndoe lt  th gt  x000D           lt td gt  lt button class  btn btn-danger deleteItem  gt Delete lt  button gt  lt  td gt  x000D         lt  tr gt  x000D         x000D         lt tr class  item  gt  x000D           lt td gt 3 lt  td gt  x000D           lt td gt Jane lt  td gt  x000D           lt td gt Doe lt  td gt  x000D           lt th gt  janedoe lt  th gt  x000D           lt td gt  lt button class  btn btn-danger deleteItem  gt Delete lt  button gt  lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D     x000D   lt script src  https   code jquery com jquery min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet  type  text css    gt  x000D   x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[javascript] How to "fadeOut" & "remove" a div in jQuery?

Examples related to javascript

Examples related to jquery