jQuery：附加可移动div

Question

我希望能够单击添加一个div的按钮，该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调试器（chrome），我可以看到存在新的div，但未正确评估为选择器。

我觉得这是很基本的东西，但似乎无法解决。

编辑-脚本中的拼写错误-不是来自原始版本

---

编辑

 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>