jQuery从生成的内容生成内容

Question

我正在使用数据库创建div，然后从数据库中的字段命名它们。 在这个div中是＆＃34;删除＆＃34;我希望能够在原始div下方创建div的链接，其中包含＆＃34; are you sure you want to delete this?＆＃34;

等消息

但我的问题是，当数据库必须生成多个这些原始div时，意味着＆＃34;删除＆＃34;链接将在不同的地方或不同的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.

下面是我想要使用的布局示例： link to image

正如您所看到的，生成的jQuery div将位于父div之外，它还具有父div的id，其中包含＆＃34; _delete＆＃34;添加到最后。 以函数为例命名函数......

这可能吗？

编辑 - 我已经有点工作了，现在的问题是当它创建额外的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')将允许您选择＆＃34; parent＆＃34;。 http://api.jquery.com/siblings/

2. 尝试使用insertAfter。 http://api.jquery.com/insertafter/

3. 您也可以使用sibling删除生成的div。 尝试在父删除锚点上调用$('#parent').sibling('#foo_delete').remove()。