如何清除div内子元素的innerHTML但保留元素本身

问题 #

我希望清除父元素下各子元素中的数据，但不删除（或隐藏）子元素本身。

重现步骤 #

• 为Test1和Test2输入数据；
• 勾选‘Use actual data’复选框，为Test3和Test4输入数据；
• 点击‘Clear Element Data for Tests 1 & 2’按钮。

预期效果 #

清除子元素的输入数据而非元素本身，使元素保持可见可用，仅清空数据。当前代码点击清除按钮时会移除#utility-info下的所有元素，请问如何实现需求？

原代码片段 #

JavaScript

$(function() {
  $("#actual").click(function() {
    if ($("#actual").is(":checked")) {
      $("#utility-info").hide();
      $("#actual-utils").show();
    } else {
      $("#utility-info").show();
      $("#actual-utils").hide();
    }
  });

  $("#clear-values").click(function() {
    $("#utility-info").html('');
  });
});

CSS

#actual-utils {
  display: none;
}

span {
  padding: 10px;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="actual" name="actual-util-info"> Use actual data
<div>&nbsp;</div>
<div id="energy-info">
  <div id="utility-info">
    <div>Test 1 <input id="test1" type="number" name="test1"></div>
    <div>Test 2 <input id="test2" type="number" name="test2"></div>
  </div>
  <div id="actual-utils">
    <div>Test 3 <input id="actual1" type="number" name="actual1"></div>
    <div>Test 4 <input id="actual2" type="number" name="actual2"></div>
  </div>
  <div>&nbsp;</div>
  <button id="clear-values">Clear Element Data for Tests 1 & 2</button>
</div>

解决方案 #

问题出在清除按钮的事件处理逻辑：$("#utility-info").html('')会直接清空#utility-info容器内的所有HTML内容，导致子元素被移除。要实现只清除输入数据的需求，需要精准定位到容器内的输入框，清空它们的内容而非删除元素。

修改后的JavaScript代码如下：

$(function() {
  $("#actual").click(function() {
    if ($("#actual").is(":checked")) {
      $("#utility-info").hide();
      $("#actual-utils").show();
    } else {
      $("#utility-info").show();
      $("#actual-utils").hide();
    }
  });

  $("#clear-values").click(function() {
    // 清空#utility-info下所有输入框的内容
    $("#utility-info input").val('');
  });
});

关键说明 #

• 使用$("#utility-info input")选择器，精准定位到目标容器内的所有输入元素；
• 调用val('')方法清空输入框的value属性，仅清除用户输入的数据，保留输入框及其父元素的结构，完全符合预期效果。

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