Remove 'this' div

JavaScript
1

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.


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

You almost got it, the this argument refers to the <span> element so instead you can use either of the following options:

// Using the #wrap selector directly, usually faster
$('.container', '#main').remove();

// Using the parent method to find the #wrap element
$('.container', $(this).parents('#wrap')).remove();
3

chris.upjohn, thanks for your reply but neither of your options seem to work

I assume


$('.container', '#main').remove();

Is meant to be


$('.container', '#wrap').remove();
4

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

I’ve got it working with


$(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.


<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

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:

$('#btn').click(function() {
    var $$ = $('<div />', {'class' : 'container'}).appendTo('#wrap');
    
    $$.append(
        $('<span />').html('DELETE').click(function() {
            $(this).parent().remove();
        }).after($('<em />'));
    );

    window.counter++;
});
7

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

My bad, change the following line from

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

to so it doesn’t have a semicolon anymore.

}).after($('<em />').html(window.counter))