Remove 'this' div.

**ttmt** · Jan 12, 2012 08:41

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>

**chris.upjohn** · Jan 12, 2012 16:16

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();

**ttmt** · Jan 13, 2012 01:51

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();

**ttmt** · Jan 13, 2012 02:35

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.

**ttmt** · Jan 13, 2012 05:58

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.

**chris.upjohn** · Jan 13, 2012 06:10

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++;
});

**ttmt** · Jan 13, 2012 07:17

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/

**chris.upjohn** · Jan 13, 2012 07:33

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))

User Tag List

Thread: Remove 'this' div.

Thread Tools

Display

Remove 'this' div.

Bookmarks

Bookmarks

Posting Permissions