Parent element Child account in DOM change

Question

A div receives a new paragraph each click, jQuery checks if there has been a change in the DOM, the event is called normally but is returning the message:

UNDEFINED

. The check does not work with .size() and .lenght of jQuery v3.3.1.

HTML:

<div class='mensagem-list'></div>

And the jQuery:

<script>
    $("body").on('DOMSubtreeModified', '.mensagem-list', function() {

        window.alert( $('.p-list').size );

    });
</script>

On the console every click on the button, the date is getting like this:

<div class='mensagem-list'>
    <p class='p-list'>[mensagem exibida]</p>
    <p class='p-list'>[mensagem exibida]</p>
</div>

Answer 1

That’s what I’d be wanting to count the child elements of the div:

$(document.body).on("click", function() {
    $(".mensagem-list").append($("<p>Um novo parágrafo!</p>"));
    var n = $("p").length;
    console.log(n + ' elementos');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='mensagem-list'>
   <p>Um novo parágrafo!</p>
</div>