Question

我有一个jQuery触发div，每5秒进行一次实时更新。这很好。有时应立即删除这些更新。

jQuery生成这样的html：

<form>

<div id="live1">Aha I love you too
<input id="live1" type="hidden" value="1"><label id="livedel1">Delete 1</label>
</div>

<div id="live2">Thx man
<input id="live2" type="hidden" value="2"><label id="livedel2">Delete 2</label>
</div>

</form>

......等等。

我需要一些HTML和jQuery的帮助如何将特定的id发送/分离到jQuery，因此可以将其删除，因为我有点不喜欢jQuery vals。删除不是问题，只是为了让jQuery获取特定的id。

欢迎使用HTML和jQuery中的建议，并且可以将上层HTML更改为xy代码没问题。

Answer 1

首先，您有具有相同ID的多个元素。这不是有效的HTML，会给您带来麻烦。

如果要在单击标签时删除div，可以执行以下操作：

<form>

<div id="live1" class="live">Aha I love you too
<input id="livehidden1" type="hidden" value="1"><label id="livedel1">Delete 1</label>
</div>

<div id="live2" class="live">Thx man
<input id="livehidden2" type="hidden" value="2"><label id="livedel2">Delete 2</label>
</div>

</form>

jQuery的：

$('.live').on('click', 'label', function() {
    $(this).closest('.live').remove();
});

关键是要将您的ID修复为有效，并将类live添加到父元素。然后，您可以使用jQuery搜索DOM并删除父live元素。但是，从您的问题来看，很难判断这是否是您真正想做的事情。

如果你不想改变你的html，除了无效的ID之外，你需要做这样的事情：

$('form').on('click', 'label', function() {
    var num = $(this).attr('id').replace(/livedel/, '');
    $('#live'+num).remove();
});

这假设您的html可能因项目而异。如果您的结构始终相同，则不必使用ID，只能使用.parent()，但正如我所建议的那样，不是很强大：

$('form').on('click', 'label', function() {
    $(this).parent().remove();
});

Answer 2

你的问题有些模糊，所以我现在正好假设你真正想要的东西。

根据您的HTML（可以改进），只要点击标签（“删除”标签），以下内容就会删除父元素（div）。

$(body).on('click', 'label', function() {
    $(this).parent().remove();
});

通过使用delete-labels的类，将click事件委托给容器元素而不是正文等，可以大大改善这一点。

使用这样的HTML（有点清洁，恕我直言）：

<div id="container">
  <div class="message">
      Aha I love you too
      <label class="delete">Delete 1</label>
  </div>
  <div class="message">
      Thx man
      <label class="delete">Delete 2</label>
  </div>
</div>

上面的JavaScript可能会变得更加简单：

$('#container').on('click', '.delete', function() {
    $(this).closest('.message').remove();
});

Answer 3

如果我理解正确，您需要在调用<DIV>时删除更新的顶级click。你可以这样做：

$('label.deleteTrigger').live(function(){
    $(this).parentUntil('div').remove();
});

这将在祖先上升，直到找到指定的选定内容（在我的示例中为div）并将其从DOM中删除。您可以阅读更多相关信息here。

此外，您需要将class（deleteTrigger，再次，在我的示例中）添加到label中，以便有一种方法来识别触发删除的元素。

要删除的唯一div - 通过jquery事件生成的div生成

3 个答案: