Remove last inside a

Question

I have <div> containing multiple <img>.

<div class="content">
  <img src="img.png"/>
  <img src="img.png"/>
  <img src="img.png"/>
  <img src="img.png"/>
</div>

The quantity <img> inside the <div> is dynamic.

I have a function that can remove all <img>. How do I modify the function to only remove last <img> inside the <div>?

document
    .querySelectorAll(".content img")
    .forEach((img) => img.remove());

Does this answer your question? [How to remove last element from div?](https://stackoverflow.com/questions/30492918/how-to-remove-last-element-from-div) — Amit Verma, Jun 27 '21 at 10:29
`document.querySelector('.content img:last-of-type').remove()` — pilchard, Jun 27 '21 at 10:35

score 2 · Accepted Answer · edited Jun 27 '21 at 14:46

2

querySelectorAll creates an array. So you just need to remove the last thing which is in the array. Something like this should work

const images =  document.querySelectorAll(".content img")
images[images.length - 1].remove()

edited Jun 27 '21 at 14:46

Uwe Keim

39,551
56
175
291

answered Jun 27 '21 at 10:31

Richard Hpa

2,353
14
23

1

It doesn't create an array, it returns a NodeList – pilchard Jun 27 '21 at 11:08
You are not removing 'the last thing which is in the array' you are removing the element from the tree it belongs to. The nodelist (which you have called an array incorrectly as @RichardHpa has pointed out) remains unaffected, it will still have length 4 if there were 4 imgs in the first place (as in the question). – A Haworth Jun 27 '21 at 13:43

score 1 · Answer 2 · edited Jun 27 '21 at 14:47

If you want to use jQuery you can find last child and remove it.

Like this: $('.content').children('img').last().remove()

function deleteLastImg() {
    $('.content').children('img').last().remove()
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>

<button onClick="deleteLastImg()" >Delet last image</button>
<div class="content">
        <img src="img.png" />
        <img src="img.png" />
        <img src="img.png" />
        <img src="img.png" />
        <span>this is span</span>
 </div>

pilchard · Answer 3 · 2021-06-27T11:21:14.507

There are a number of ways to do what you are asking. Keep in mind that the return value of querySelectorAll is an array-like NodeList which can be accessed using standard array syntax, implements some array methods (forEach for example) or can be coerced to an array.

If you want to keep working with the result of querying all img elements in your div you can simply access the last element in the returned NodeList and remove it.

const images = document.querySelectorAll('.content img');
images[images.length-1].remove();

// or spread the NodeList to an array and pop
[...document.querySelectorAll('.content img')].pop().remove();

Alternatively, you can query the last img element directly using either :last-child or :last-of-type

document.querySelector('.content img:last-child').remove();

// or
document.querySelector('.content img:last-of-type').remove();

document
  .getElementById('lastchild')
  .addEventListener('click', () => document.querySelector('.content img:last-child').remove());

document
  .getElementById('lasttype')
  .addEventListener('click', () => document.querySelector('.content1 img:last-of-type').remove());

document
  .getElementById('lastindex')
  .addEventListener('click', () => {
    imgs = document.querySelectorAll('.content2 img');
    imgs[imgs.length - 1].remove()
  });

document
  .getElementById('pop')
  .addEventListener('click', () => [...document.querySelectorAll('.content3 img')].pop().remove());

<div class="content">
  <img src="https://source.unsplash.com/random/100x100/?sig=1"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=2"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=3"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=4"/>
</div>

<button type='button' id='lastchild'>Remove :last-child</button>

<hr>

<div class="content1">
  <img src="https://source.unsplash.com/random/100x100/?sig=5"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=6"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=7"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=8"/>
</div>

<button type='button' id='lasttype'>Remove :last-of-type</button>

<hr>

<div class="content2">
  <img src="https://source.unsplash.com/random/100x100/?sig=9"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=10"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=11"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=12"/>
</div>

<button type='button' id='lastindex'>Remove imgs[length-1]</button>

<hr>

<div class="content3">
  <img src="https://source.unsplash.com/random/100x100/?sig=13"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=14"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=15"/>
  <img src="https://source.unsplash.com/random/100x100/?sig=16"/>
</div>

<button type='button' id='pop'>Remove pop()</button>

score 0 · Answer 4 · answered Jun 27 '21 at 10:44

Use .lastChild.remove();

let yourDiv = document.getElementById("yourDiv");

function yourFunction () {
yourDiv.lastChild.remove();
}

<button onclick="yourFunction()">Click me</button>
<div class="content" id="yourDiv">
  <img src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300"/>
  <img src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300"/>
  <img src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300"/>
  <img src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300"/>
</div>

This removes the lastchild of any element type, not the last img element. Your button also only works once because your query is outside your callback function. — pilchard, Jun 27 '21 at 10:47

Remove last inside a

4 Answers4