Na view
eu tenho um input
select que no evento onchange
eu executo uma chamada em ajax
para uma determinada rota que busca todos os itens de um Model
.
<select required onchange="getQuestions()" name="questionnaire_id" id="questionnaire_id" class="form-control">
<option value="">Selecione</option>
@if(count($questionnaires) > 0)
@foreach($questionnaires as $item)
@if($item->id == $anamnese->quest_id)
<option selected value="{{ $item->id }}">{{ $item->name }}</option>
@else
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endif
@endforeach
@endif
</select>
function getQuestions(){
$.ajax({
type: "GET",
data: {id: $('#questionnaire_id').val()},
url: '/student-anamnese/questions/' + $('#questionnaire_id').val(),
success: function(data){
$.each(JSON.parse(data), function(i, item) {
console.log(data);
$("#col").append('<h3>Perguntas</h3>\
<p class="text-success">' + item.name + '</p>\
<input type="hidden" name="questionnaire_question_id[]" value="'+ item.id +'" />\
<textarea required name="questionnaire_questions_answers[]" cols="80" placeholder="Digite a resposta aqui" rows="3" id="perguntas"></textarea>');
});
}
})
}
Nessa chamada ajax, em success, eu renderizo alguns elementos html na tela. Eu preciso que quando o usuário mudar a opção no select, esses elementos html sejam apagados e renderize os novos elementos.
$("#col").html('')
pode resolver, caso você queria excluir todos os dados do#col
, mas se você tem mais coisa dentro e quer excluir apenas o que foi adicionado, você pode dar uma classe pra eles... que seria a forma mais simples e depois remove-los:$('.nome_class').remove()
$("#col").empty();