SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove 'this' div.

    Remove 'this' div.

    Hi all

    http://www.ttmt.org.uk/

    I have this simple example here were you can click the 'Add Block' btn
    to add div's that contain a 'DELETE' span.

    I want to delete 'this' div when the span is clicked.

    I have looked online but I can't see how to do it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
      <style type="text/css" media="screen">
        *{
          margin:0;
          padding:0;
        }
        button{
          cursor:pointer;
          margin:20px 0 0 20px;
          padding:10px;
        }
        #wrap{
          margin:20px;
        }
        #wrap .container{
          background:red;
          width:300px;
          height:150px;
          margin:0 0 10px 0;
          position:relative
        }
        #wrap .container span{
          background:white;
          cursor:pointer;
          font-weight:bold;
          padding:10px;
          position:absolute;
          top:20px;
          right:20px;
        }
      </style>
    </head>
    
    <body>
      <button id="btn">Add Block</button>
      <div id="wrap">
        
      </div>
      
      
      <script type="text/javascript" charset="utf-8">
      
        $('#btn').click(function(){
          $("<div class='container'><span>DELETE</span></div>").appendTo('#wrap');
          $('.container span').click(function(){
            $('.container', this).remove();
          })
        })
        
        
      </script>
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You almost got it, the this argument refers to the <span> element so instead you can use either of the following options:

    Code JavaScript:
    // Using the #wrap selector directly, usually faster
    $('.container', '#main').remove();
     
    // Using the parent method to find the #wrap element
    $('.container', $(this).parents('#wrap')).remove();
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    chris.upjohn, thanks for your reply but neither of your options seem to work

    I assume

    Code:
    $('.container', '#main').remove();
    Is meant to be

    Code:
    $('.container', '#wrap').remove();

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry chris.upjohn your code did work but it's deleting all the divs.

    I only want to delete the div the button is in.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got it working with

    Code:
    $(this).parent().remove();
    I now have another 'this' problem.

    I want to number each div as it is added. I can do this with a counter that is increased with each div added.

    Code:
    <script type="text/javascript">
      
        window.counter = 0;
        
        $('#btn').click(function(){
          $("<div class='container'><span>DELETE</span><em></em></div>").appendTo('#wrap');
          //
          //$('.container em', this).html(window.counter);
          $('.container em').html(window.counter);
          window.counter++;
          //
          $('.container span').click(function(){
            $(this).parent().remove();   
          })
        })
        
      </script>
    The problem is each div is numbered the same as the counter increases. I want each div numbered separately - 1,2,3 etc.

    http://www.ttmt.org.uk/

    Again any help would be greatly appreciated.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The way you currently have you code setup will select all the elements with a class of container, to avoid this you need to reference the current element as seen in the below example:

    Code JavaScript:
    $('#btn').click(function() {
        var $$ = $('<div />', {'class' : 'container'}).appendTo('#wrap');
     
        $$.append(
            $('<span />').html('DELETE').click(function() {
                $(this).parent().remove();
            }).after($('<em />'));
        );
     
        window.counter++;
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    chris.upjohn thanks for the code.

    Bit of a jump from the code I had but I think I can see whats supposed to happen.

    The code doesn't work for me - the div's aren't added.

    http://www.ttmt.org.uk/1/

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    My bad, change the following line from

    Code JavaScript:
    }).after($('<em />'));

    to so it doesn't have a semicolon anymore.

    Code JavaScript:
    }).after($('<em />').html(window.counter))
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •