Как я могу проверить, сколько элементов находится внутри одного поля?

Question

У меня есть часть кода в моем HTML:

<div class="all-homes">
  <div class="home">RED</div>
  <div class="home">WHITE</div>
  <div class="home">GREEEN</div>
  <div class="home">BLUE</div>
</div>

Мне нужно удалить home из списка, только если в классе all-homes их больше 1 home. В противном случае должно появиться предупреждающее сообщение о том, что вы не можете удалить home, потому что в списке всего 1 home. Возможно ли это?

Я пробовал:

<script>
function myFunction() {

if  (document.getElementsByClassName("all-homes") "how to gete the right informatuion here" ) {
 event.run();
}else {
    event.preventDefault(); // prevent form submit
    swal({
  title: "Remove Home",
  text: " text",
  icon: "warning",

});

  }
}
</script> 

Моя кнопка удаления:

<p>{{home_at_homes_pk}}</p> //this is the home list

    <form method='post' action="{% url 'home_at_homes_delete' home_at_homes_pk=home_at_homes_slug%}">
             {% csrf_token %}
              <button type="submit" onclick="myFunction()"  id="remove-location"       class="txt-button alert icon-link" style="margin-top: 0rem;">
           <span class="icon">
           <i class="fas fa-trash-alt"></i>
           </span>
           Remove Home
           </button>
        </form>

обновление из комментария : Я хочу удалить все элементы, пока не останется один

Большое спасибо

Answer 1

   function myFunction() {

     var all = document.getElementsByClassName("all-homes")[0];

     while (all.children.length > 1) {
        console.log(all.children.length)
        all.children[0].remove();
     }
   }

Answer 2

Надеюсь ответить на ваш вопрос

const red = document.getElementById('red');

jQuery('#remove').on('click', () => {
    const elements = $('#red').children('.home');
    if(elements.length > 1) {
        for( let i=0; i< elements.length - 1; ++i){
            $(elements[i]).remove();
        }
    } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">
    <div class="home">WHITE</div>
    <div class="home">GREEN</div>
    <div class="home">BLUE</div>
</div>
<button id="remove">Remove home</button>