Wie man ein dynamisch hinzugefügtes div entfernt?

Question

Das ist mein HTML

<div class="form-group"> 
      <label>Categories</label> 
      <button type="button" onclick="createContainer(availableCategories,'','.categoriesWrapper','Categories')" class="btn btn-default">+</button> 
      <div class="categoriesWrapper"> 
      </div> 
     </div> 

Innen Ich bin mehr divs mit 'Kind' Klasse mit dieser Funktion hinzufügen:

function createContainer(datasource, selectedItem, wrapper, name) { 
var maxFields = 10; 
var $container = $('<div style="margin-top:5px;" class="child" />'); 
var $select = $("<select class='form-control littleSpace' name='" + name + "'/>"); 
var $button = $("<button type='button' class='delete btn btn-default ' '>-</button>"); 

if ($(wrapper).children().length < maxFields) { 
    for (var itemId in datasource) { 
     //check to see if the option is the selected one 
     var isItemSelected = selectedItem && selectedItem === itemId; 
     var $option = null; 
     //create each option 

     if (isItemSelected == true) { 
      $option = $('<option value="' + itemId + '" selected>' + datasource[itemId] + '</option>'); 
     } 
     else { 
      $option = $("<option value='" + itemId + "'>" + datasource[itemId] + "</option>"); 
     } 

     //append option to select 
     $select.append($option); 
    } 
    $container.append($select); 
    $container.append($button); 
    $(wrapper).append($container); 
} 

};

Alles funktioniert gut bis jetzt, aber wenn ich versuche, eine dieser Divs und div Inhalt zu löschen ... wird es nicht funktionieren. Dies ist, was ich versucht habe:

$('.categoriesWrapper').on('click', 'delete', function() { 
    $(this).parent.remove(); 

}); 

Bitte helfen Sie mir

Answer 1

Pass-Klasse mit . es .delete Innenrasterung Funktion auch funktioniert wie pro @Rayon Änderung

$('.categoriesWrapper').on('click', '.delete', function() { 
    $(this).parent().remove(); 
}); 

parent zu parent() bemerkt