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调试器（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>

jQuery：追加可移动的div

1 个答案: