jquery - 删除附加数据 - jquery

Question

select: function (event, ui) {

        var staffItem = new Object();


        staffItem.StaffId = ui.item.id;
        staffItem.Name = ui.item.name;
        staffItem.Photo = ui.item.image;
        staffItem.Email=ui.item.email;
        staffItem.Mobile=ui.item.mobile;          

              var data = "<div><table width='100%'><tr><td align='right' ><div class='close16'/></td></tr></table><div><table><tr><td rowspan='4' width='50px;'><img src='" + staffItem.Photo + "' Width='48' Height='48'  /></td><td>" + staffItem.Name + " ( " + staffItem.StaffId + " )</td></tr><tr><td><table cellpadding='0' cellspacing='0'><tr><td>" + staffItem.Email + "</td><td>&nbsp;|&nbsp;</td><td>" + staffItem.Mobile + "</td></tr></table></td></tr></table></td></tr></table></div></div> ";
                $('#staffInCharge').css('background-color','#FFAA55');
                $('#staffInCharge').append(data);

我使用此代码将人员详细信息附加到div中，并且在close16类中使用图像文件(用于十字标记来删除数据)，如果我单击十字标记，则应删除附加的数据，如何才能我这样做了，而且当我附加新数据时，它会逐一附加(在现有数据下方)，我需要将其附加到右侧，我该怎么做。

Answer 1

要删除数据，您可以执行以下操作:

$(document).on('click', '.close16', function() {
    $(this).parentsUntil('div').remove();
});

至于附加数据，这在一定程度上取决于您的 DOM 的外观以及您想要实现的目标。您可能想看看insertAfter和 insertBefore用于准确控制数据的添加位置。让事物显示在“右侧”可能更多的是您所插入元素的样式问题，而不是您在 DOM 中插入它们的位置。

.append 将内容添加到容器的底部，只要考虑您的标记。这是否与物理上出现在容器中先前项目下方的项目相同，取决​​于这些元素的属性。

如果您在另一个 DIV 之后添加一个 DIV，那么默认情况下，它会出现在前一个 DIV 的下方，但这更多地与元素的显示模式有关，而不是与它在代码中的位置有关。 Example .

如果 DIV 元素具有不同的显示模式，例如 inline-block，它们将显示在前一个元素的右侧。 Example 。请注意，JavaScript 不会改变。

但是，如果您想使用 float: left; 定位 DIV，您可能会发现您想要插入的元素不是在容器的底部，而是在 之前clear: 两个-元素，始终位于底部。然后您将不得不使用类似 insertBefore 的东西。 Example .

哪种方法最适合您取决于标记和样式的很多方面。说您想要“右侧”的东西并不能为我们提供足够的信息来帮助您在这方面。