CODEWITHSUNDEEP
javascripthtmljquery
codingFenrir
codingFenrir

Reputation: 23

How to get number of div left after deleting?

In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.

However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.

How can I get the current number of div elements left in the DOM immediately after clicking the button?

setTimeout(() => {
  if ($(".delete div").length > 0) {
    $(".num span").html($(".delete div").length);
  }
}, 100);

$("button").click(function() {
  $(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

Upvotes: 1

Views: 41

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337656

The problem is because you're using setTimeout(), which only runs once after the specified delay.

For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:

setInterval(() => {
  if ($(".delete div").length > 0) {
    $(".num span").html($(".delete div").length);
  }
}, 100);

$("button").click(function() {
  $(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:

var $span = $(".num span").html($(".delete div").length);

$("button").click(function() {
  $(".delete div:last-child").remove();
  $span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
  <div class="div8">8</div>
</div>

<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>

Upvotes: 1

Related Questions