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

Question

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.

Post your JavaScript please.

j08691
– j08691

2014-05-09 20:34:59 +00:00
Commented May 9, 2014 at 20:34 — j08691
– j08691, Commented May 9, 2014 at 20:34

Bill Criswell · Accepted Answer · 2014-05-09 20:52:57Z

2

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

edited May 9, 2014 at 20:52

answered May 9, 2014 at 20:42

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

egyamado Over a year ago

yes, that's what I was looking for. Each time i click on 'Remove Article' it deletes one. When I delete last article it deletes the whole section which include Header and link. Before I asked the question, I had the part done, i was missing [ last().remove ]. Thanks

deweyredman · Accepted Answer · 2014-05-09 20:40:07Z

1

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()
}

answered May 9, 2014 at 20:40

deweyredman

1,4501 gold badge9 silver badges12 bronze badges

4 Comments

Jay Blanchard Over a year ago

This would be better as a comment since it does not answer the OP's question.

user400654 Over a year ago

note this currently is not supported in any version of IE

deweyredman Over a year ago

fine. i'll change it to node

sjkm Over a year ago

Why? you are using jquery so use the parent() function!

jackfrankland · Accepted Answer · 2014-05-09 20:46:33Z

1

$('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

answered May 9, 2014 at 20:46

jackfrankland

2,0521 gold badge14 silver badges11 bronze badges

Comments

Jay Blanchard · Accepted Answer · 2014-05-09 20:57:48Z

0

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

edited May 9, 2014 at 20:57

answered May 9, 2014 at 20:40

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

1 Comment

Barmar Over a year ago

This will remove the section even if there are still other articles in it. He only wants to remove the section when all articles have been removed.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related