我需要从previos选择中的文本来清除何时选择不同的选项

Question

我有一个选择框，下面有条件显示文本。最初，选择一个选项会显示一个文本，但选择不同的选项应该清除第一个文本并只显示与新选择的选项关联的文本。但是，该页面当前正在显示这两个文本并且没有清除第一个选项的文本。我该如何解决这个问题？

<div class="input-wrap" id="descripcion">
    <label for="slct1"></label><br />
    <p id="Portero" style="display:none;" onchange="clearField(this.id)"> TEXT 1 </p>
</div>
<div class="input-wrap" id="descripcion">
    <label for="slct1"></label><br />
    <p id="Defensa central" style="display:none;" onchange="clearField(this.id)"> TEXT 2 </p>
</div>

<script>
    function populate_descripcion(s1)
    {   
      var s1 = document.getElementById(s1);
      
      var desc = document.getElementById('descripcion');

      if(s1.value == "Portero")
      { 
        document.getElementById('Portero').style.display = 'block';
      }
      else if(s1.value == "Defensa central")
      {
        document.getElementById('Defensa central').style.display = 'block';
      }
    }

    function clearField(descripcion)
    {
      document.getElementById('descripcion').value=" ";
    }
</script>

我在带有 onChange 事件的脚本中尝试了“clearField”函数。