javascript - 使用 jquery 删除其他 HTML 元素时如何动态删除 HTML 元素

Question

我这里有这个 html 代码:

  <div class="container">
    <section>
      <header class="date">May 2014</header>
      <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit</article>
      <article>Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit aperiam placeat minus ratione mollitia expedita tempore reprehenderit maxime.</article>
      <article>ratione mollitia expedita tempore reprehenderit maxime.</article>
      <a href="#">Remove Article</a>
    </section>

    <section>
      <header class="date">March 2014</header>
      <article>Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit aperiam placeat minus ratione mollitia expedita tempore reprehenderit maxime unde quas beatae maiores.
      </article>
      <a href="#">Remove Article</a>
    </section>

    <section>
      <header class="date">April 2014</header>
      <article>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</article>
      <article>Repellendus, dolorem, laborum non illum voluptate vitae quibusdam impedit aperiam placeat minus ratione mollitia expedita tempore reprehenderit maxime unde quas beatae maiores.
      </article>
      <a href="#">Remove Article</a>
    </section>
  </div>

当我点击“删除文章”链接时，我应该删除上面的一篇文章。我已经明白了。

现在我要在这里完成的是，当我“逐一”删除属于特定部分的所有文章时，我需要自动完全删除标题“日期”和链接“删除文章” .

我尝试了不同的方法，但仍然可以看到标题和链接，但是当我刷新页面时它们就消失了。

Answer 1

我想我捕获了你。您是否要一篇一篇地删除文章，然后如果没有更多内容，则删除整个部分？如果是这样，这应该有效:

$('a').on('click', function (e) {
  e.preventDefault();

  var $section = $(this).closest('section'),
      $articles = $section.find('article');

  $articles.last().remove();


  // $articles.length will not be one less just because we removed 
  // an item, so just checking for 1 here is the same as checking
  // if it's empty.

  if ($articles.length === 1) {
    $section.remove();
  }
});