How do I delete previous value using javasript

Question

I’m trying to develop a selection of information, where in the end will form the product code, as the image below.

But when choosing the fields it adds, but if you need to change, does not delete the previous one it remains is inserted the new and so on.

html code

<div>G <p id="teste"></p></div>

javascript code

$(function(){
$("#cidades").change(function(){
            $('#colors div').hide();
            $('#'+$(this).val()).show();
        });
$("#estados").change(function(){
var id = $(this).val();
    $.ajax({
        type: "POST",
        url:"../../paginas/pesquisa/pesquisa_codigo_giga.php?id="+id,
        dataType:"text",
        success:function(res){
            $("#cidades").children(".cidades").remove();
            $("#cidades").append(res);
        }
    });
});
$("#cidades").change(function(){
var id = $(this).val();
    $.ajax({
        type: "POST",
        url:"../../paginas/pesquisa/pesquisa_codigo_giga_ind_out.php?id="+id,
        dataType:"text",
        success:function(res){
            $("#teste").children(".teste").remove();
            $("#teste").append(res);
        }
    });
});});

php code

<?php
include "../../controle/conexao.php";
$id = $_GET['id'];
$sql = "SELECT * FROM tabela_indoor_outdoor WHERE tabela_indoor_outdoor_id='$id'";
$sql = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($sql)){
$nome = $row['tabela_ind_out_cod_giga'];
echo $nome;
}
?>

I need that when selecting the code in sequence it returns the values, and if the person changes, it deletes old code and insert new.

Answer 1

In cidades you don’t need to link two events .change, and then to replace the values just change the method .append for .html:

$(function(){
    $("#estados").change(function(){
    var id = $(this).val();
        $.ajax({
            type: "POST",
            url:"../../paginas/pesquisa/pesquisa_codigo_giga.php?id="+id,
            dataType:"text",
            success:function(res){
                $("#cidades").html(res);
            }
        });
    });
    $("#cidades").change(function(){

        $('#colors div').hide();
        $('#'+$(this).val()).show();

        var id = $(this).val();
        $.ajax({
            type: "POST",
            url:"../../paginas/pesquisa/pesquisa_codigo_giga_ind_out.php?id="+id,
            dataType:"text",
            success:function(res){
                $("#teste").html(res);
            }
    });
});
});

Answer 2

You can simply clean up using the function .empty()

Instead of using $("#cidades").children(".cidades").remove(); use:

$("#teste").empty();

This way it will remove all elements within your element <p id="teste"></p>

or the function .text();

 $("#teste").text("");

That works replace the existing text inside your widget by "";