jQuery: append removeable div

Question

Я хочу, чтобы иметь возможность нажимать кнопку, которая добавляет div, который содержит другую кнопку, которую можно нажать, чтобы удалить указанный div.

function addPanel(name) { 
    var outer = $("<div id='" + name + "'>"); 
    var inner = $("<button>"); 
    inner.click(function() { 
     $("'#" + name + "'").remove(); 
    }); 

    outer.append(inner); 

    $("#someotherdiv").append(outer); 
} 

Когда я вызываю эту функцию, она кладет новый div на место с помощью кнопки. Когда я нажимаю кнопку (новый), появляется сообщение об ошибке «# name» не определен. Используя javascript/DOM debugger (chrome), я вижу, что новый div присутствует, но не оценивается как селектор правильно.

Я чувствую, что это что-то довольно простое, но я не могу показаться, чтобы его вокруг не было.

EDIT - опечатка в скрипте фиксированной - не из оригинального

---

EDIT

function addPanel(name) { 
 
    var outer = $("<div id='" + name + "'>" + name + "</div>"); 
 
    var inner = $("<button>Delete</button>"); 
 
    inner.click(function() { 
 
    $("#" + name).remove(); 
 
    }) 
 

 
    outer.append(inner); 
 

 
    $("#someotherdiv").append(outer); 
 
} 
 

 
addPanel('div2'); 
 
    
 
$("#addButton").click(function() { 
 
     addPanel('div1'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 

 
</script> 
 
<div id="someotherdiv"> 
 
    Main div 
 
</div> 
 
<button id="addButton">add</button>

Answer 1

Проблема с единственной цитаты. Также вы пропустили ) в конце события нажатия кнопки. Попробуйте следующее.

function addPanel(name) { 
 
    var outer = $("<div id='" + name + "'>" + name + "</div>"); 
 
    var inner = $("<button>Delete</button>"); 
 
    inner.click(function() { 
 
    $("#" + name).remove(); 
 
    }) 
 

 
    outer.append(inner); 
 

 
    $("#someotherdiv").append(outer); 
 
} 
 

 
addPanel('div1'); 
 
addPanel('div2');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="someotherdiv"> 
 
    Main div 
 
</div>