Adding close button in div to close the box

Question

I have created a URL preview box for the entered URL  Preview is shown in the div box  I want to add a close option on the right top  How could be done so that when users click on its box should be disabled  Here is my fiddle   lt a class  quot fragment quot  href  quot google com quot  gt       lt div gt       lt img src   quot http   placehold it 116x116 quot  alt  quot some description quot   gt        lt h3 gt the title will go here lt  h3 gt           lt h4 gt  www myurlwill com  lt  h4 gt       lt p class  quot text quot  gt          this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc       lt  p gt   lt  div gt   lt  a gt   code is inside php

User · Accepted Answer

Most simple way  assumed you want to remove the element    lt span id  close  onclick  this parentNode parentNode parentNode removeChild this parentNode parentNode   return false   gt x lt  span gt    Add this inside your div  an example here   You may also use something like this  window onload   function        document getElementById  close   onclick   function            this parentNode parentNode parentNode          removeChild this parentNode parentNode           return false              An Example Here   Css for close button   close       float right      display inline-block      padding 2px 5px      background  ccc      You may add a hover effect like   close hover       float right      display inline-block      padding 2px 5px      background  ccc      color  fff      Something like this one

User · Answer

jQuery   your div id   remove    will completely remove the corresponding elements from the HTML DOM  So if you want to show the div on another event without a refresh  it will not be possible to retrieve the removed elements back unless you use AJAX   jQuery   your div id   toggle  slow    will also could make unexpected results  As an Example when you select some element on your div which generates another div with a close button which uses the same close functionality just as your previous div  it could make undesired behaviour   So without using AJAX  a good solution for the close button would be as follows  HTML               lt div id  your div id  gt   lt span class  close div  onclick  close div 1   gt  amp  10006 lt  span gt   lt  div gt    JQUERY            function close div id        if id     1            jQuery   your div id   hide              Now you can show the div  when another event occures as you wish     -

User · Answer

it s easy with the id of the div container    I didn t put the close button inside the  lt a gt  because that s does work properly on all browser    lt div id  myDiv  gt   lt button class  close  onclick  document getElementById  myDiv   style display  none    gt Close lt  button gt   lt a class  fragment  href  http   google com  gt       lt div gt       lt img src   http   placehold it 116x116  alt  some description   gt        lt h3 gt the title will go here lt  h3 gt           lt h4 gt  www myurlwill com  lt  h4 gt       lt p class  text  gt          this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc       lt  p gt   lt  div gt   lt  a gt   lt  div gt

User · Answer

Here s the updated FIDDLE  Your HTML should look like this  I only added the button     lt a class  fragment  href  google com  gt       lt button id  closeButton  gt close lt  button gt       lt div gt           lt img src   http   placehold it 116x116  alt  some description   gt            lt h3 gt the title will go here lt  h3 gt           lt h4 gt  www myurlwill com  lt  h4 gt           lt p class  text  gt          this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc           lt  p gt       lt  div gt   lt  a gt    and you should add the following CSS    fragment       position  relative     closeButton       position  absolute      top  0      right  0      Then  to make the button actually work  you should add this javascript   document getElementById  closeButton   addEventListener  click   function e        e preventDefault        this parentNode style display    none      false     We re using e preventDefault   here to prevent the anchor from following the link

User · Answer

A jQuery solution  Add this button inside any element you want to be able to close    lt button type  button  class  close  onclick    this  parent   remove     gt    lt  button gt    or to  just  hide it    lt button type  button  class  close  onclick    this  parent   hide     gt    lt  button gt

User · Answer

You can use this jsFiddle  And HTML    lt div id  previewBox  gt       lt button id  closeButton  gt Close lt  button gt   lt a class  fragment  href  google com  gt       lt div gt       lt img src   http   placehold it 116x116  alt  some description   gt        lt h3 gt the title will go here lt  h3 gt           lt h4 gt  www myurlwill com  lt  h4 gt       lt p class  text  gt          this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc       lt  p gt   lt  div gt   lt  a gt   lt  div gt    With JS  jquery required      document  ready function             closeButton   on  click   function e                 previewBox   remove

User · Answer

Updated your fiddle  http   jsfiddle net xftr5 11  Hope  everything is clear     document  ready function             fragment i   on  click   function e      e target  closest  a   remove              Added jQuery and inserted an  lt i gt  as close trigger

[javascript] Adding close button in div to close the box

Examples related to javascript

Examples related to php

Examples related to html