JavaScript单选按钮点击后如何清除之前的输出内容？

核心思路：点击任意单选按钮时，先清空所有输出区域的内容，再设置当前按钮对应的内容。以下提供几种可行方案：

方案一：统一输出标签类名，简化批量清空操作 #

修改HTML，给所有输出用的<p>标签添加统一类名：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <label>Radio1</label>
  <input type="radio" id="value1" name="value1">
  <label>Radio2</label>
  <input type="radio" id="value2" name="value1">
  <label>Radio3</label>
  <input type="radio" id="value3" name="value1">
</form>
<p id="New" class="output-area"></p>
<p id="New2" class="output-area"></p>
<p id="New3" class="output-area"></p>

修改JS逻辑，先清空所有输出区域再设置当前内容：

var a = 1;
var b = 2;
var c = 3;

// 给所有单选按钮绑定统一的清空事件
$("input[name='value1']").on("click", function() {
  $(".output-area").html("");
});

$("#value1").on("click", function() {
  $("#New").html(a);
});

$("#value2").on("click", function() {
  $("#New2").html(b);
});

$("#value3").on("click", function() {
  $("#New3").html(c);
});

方案二：无需修改HTML，逐个清空其他输出区域 #

如果不想调整HTML结构，可在每个按钮的点击事件里直接清空另外两个输出标签：

var a = 1;
var b = 2;
var c = 3;

$("#value1").on("click", function() {
  $("#New2, #New3").html("");
  $("#New").html(a);
});

$("#value2").on("click", function() {
  $("#New, #New3").html("");
  $("#New2").html(b);
});

$("#value3").on("click", function() {
  $("#New, #New2").html("");
  $("#New3").html(c);
});

方案三：优化逻辑（推荐） #

利用单选按钮的value属性绑定内容，只用一个输出区域展示，更符合单选按钮互斥选择的特性：
修改HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
  <label>Radio1</label>
  <input type="radio" id="value1" name="value1" value="1">
  <label>Radio2</label>
  <input type="radio" id="value2" name="value1" value="2">
  <label>Radio3</label>
  <input type="radio" id="value3" name="value1" value="3">
</form>
<p id="output"></p>

JS代码：

$("input[name='value1']").on("click", function() {
  $("#output").html($(this).val());
});

内容的提问来源于stack exchange，提问作者John Lyons