CODEWITHSUNDEEP
javascriptjqueryhtml
egyamado
egyamado

Reputation: 1121

How to remove HTML element dynamically when others are been removed using jquery

I have this html code here:

  <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>

When I click on 'Remove Article" link i should remove one of the article above it. I've got that.

Now what i'm trying to accomplish here is, when I remove all articles 'one by one' that belongs to specific section I need automaticly to have the header 'date' and the link 'Remove Article' to be removed completely.

I have tried different ways, but still I can see both header and link, but when I refresh page they are gone.

Upvotes: 0

Views: 107

Answers (4)

Jay Blanchard
Jay Blanchard

Reputation: 34416

UPDATE: removes each article until only one is left in a section, then removes last article and section. Thanks @Barmar for pointing out my error.

$('body').on('click', '.container a', function (e) {
    e.preventDefault();
    var articleLength = $(this).closest('section').find('article').length;
    if (1 != articleLength) {
        $(this).closest('section').find('article:last').remove();
    } else {
        $(this).closest('section').remove();
    }
});

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32921

I think I got you. Do you want to remove articles one by one then if there's no more remove the whole section? If so, this should work:

$('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();
  }
});

Upvotes: 2

jackfrankland
jackfrankland

Reputation: 2062

$('section a').on('click', function(e) {
    e.preventDefault();
    var self = $(this);
    var articles = self.siblings('article');
    if (articles.length > 1) {
        articles.last().remove();
    }
    else {
        self.parent().remove();
    }
})

JSFiddle

Upvotes: 1

deweyredman
deweyredman

Reputation: 1450

have you tried binding this.parentElement.remove() to the a elements in your html? It will remove the entire section.

$('.container a').click(function(){
     this.parentNode.remove()
}

Upvotes: 1

Related Questions