Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

229
Visualizações
how to remove the appended elements in jquery

By right-clicking on each picture, the picture will be removed, and a new item will be created by clicking on the + button.

But the problem is that the new items that are created (appended) could not be removed. Why is this the case?

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    $(this).remove();
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`);
    nextItem++;
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="items">
    <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div>
    <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div>
    <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div>
  </div>
  <button class="btn">+</button>
</div>

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

Because those aren't targeted by the event handler. It doesn't automatically update the elements which are matching the query selector, it's the same as if you'd used addEventHandler - it runs once. (see below where they don't log a message to the console but the hardcoded ones do).

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    console.log("Event processed");
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`);
    nextItem++;
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="items">
    <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div>
    <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div>
    <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div>
  </div>
  <button class="btn">+</button>
</div>

Instead what I would do is define that removal as a function and re-add it to the new element using the id:

$(document).ready(function() {
  let nextItem = 4;
  function removeItem() {
    $(this).remove();
  }
  $(".items div").click(removeItem);
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`);
    $(`#${nextItem}`).click(removeItem);
    nextItem++;
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="items">
    <div id="1"><img src="https://picsum.photos/id/0/200/100" alt=""></div>
    <div id="2"><img src="https://picsum.photos/id/1/200/100" alt=""></div>
    <div id="3"><img src="https://picsum.photos/id/2/200/100" alt=""></div>
  </div>
  <button class="btn">+</button>
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

You should use live events https://api.jquery.com/live/ since you're creating a new Dom element and not attaching the click event again

$(".items div").live('click',function() {
    $(this).remove();
  });
about 4 years ago · Juan Pablo Isaza Relatório

0

Try this

$(document).ready(function() {
  let nextItem = 4;
  $(".items div").click(function() {
    $(this).remove();
  });
  $(".btn").click(function() {
    $(".items").append(`<div id="${nextItem}"><img src="https://picsum.photos/id/${nextItem - 1}/200/100" alt=""></div>`);
    nextItem++;
  })
  $(`div#${nextItem}`).on('click',function(){
     $(this).remove();
  })
});
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda