jQuery从生成的内容生成内容

Question

我使用数据库创建div，然后从数据库中的字段中命名它们。在这个div中有一个“删除”链接，我希望它能够在原始div下面创建一个div，并带有诸如"are you sure you want to delete this?“之类的消息。

但我的问题是数据库必须生成多个原始div，这意味着“删除”链接将在不同的地方或不同的div中多次使用。

我不确定如何在其中创建Javascript/jQuery脚本：

1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.

下面是我想使用的布局示例：

链接到图像

如您所见，生成的jQuery div将位于父div之外，它还具有父div的id，并将"_delete“添加到末尾。函数作为命名函数的示例.

这有可能吗？

编辑-我已经让它有点工作，现在的问题是，当它创建额外的div时，它不会阻止您制造多个.我怎么才能限制这个呢？

我至今所做的一切

function action() {
    var visable = false;
        if(visable==false) {
            $("#foo").append('
                <div id="action_foo" class="action-warn center">
                    Are you sure you want to delete "<span>foo</span>"? 
                    <a href="./?delete=1" onclick="deleteFoo()">Yes</a> / <a href="#" onclick="deleteFoo()">No</a>
                </div>
                ')
                visable = true;
        } else if(visable==true) {}
}

Answer 1

试试这个：

$(document).ready(function(){
   $('#foo ul li.right').click(function(){
      var _parent = $(this).parent(), // gets immediate parent which is ul
          _gparent = _parent.parent(); // gets grandparent which is #foo
      $('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
   });
   $('#foo_delete a').click(function(){
      $('#foo_delete').remove();
   });
});

Answer 2

是的是可能的。

1. $('#foo_delete').sibling('#parent')将允许您选择“父”。http://api.jquery.com/siblings/
2. 尝试使用insertAfter。http://api.jquery.com/insertafter/
3. 您也可以使用sibling删除生成的div。尝试在父级的删除锚上调用$('#parent').sibling('#foo_delete').remove()。