I have a collapsible , and when it is expanded I want to add elements in it, and when it is collapsed I want to delete the elements.
I am currently using the following form:
<div id="expansorTurma" data-role="collapsible">
<h4 id="expansorTurmaTitle" onclick="montarCursos()">Não sei o código da minha turma.</h4>
<h6>Escolha seu curso.</h6>
<div id="cursos"></div>
</div>
<script>
function montarCursos() {
/** **/
$("#cursos").append(<button class="ui-btn ui-corner-all">Elemento</button>')
/** **/
}
</script>
But in this case I encounter a big problem, because every time the button is clicked a new element is created, but I need it to be created only once, and then deleted.