如何最好地清除`
`内部元素的`innerHTML`而不移除这些元素。

huangapple go评论77阅读模式
英文:

How best to clear innerHTML of elements inside a div without removing the elements

问题

我试图清除父元素中每个子元素中的数据,而不删除(或隐藏)实际的子元素。

要重现这个问题:

  • Test1Test2输入数据
  • 单击复选框'使用实际数据',并为Test 3Test 4输入数据。
  • 按下按钮'清除 Tests 1 & 2 的元素数据'。

这意味着要删除innerHTML数据,而不是元素本身。

我希望元素保持可见和可用,只是没有任何数据。我只想清除数据。

我该如何做到这一点?

英文:

I'm trying to clear the data that's in each child element of a parent element without removing (or hiding) the actual child elements.

To reproduce the problem:

  • Enter data for Test1 and Test2
  • Click the checkbox 'Use actual data' and enter data for Test 3 and Test 4.
  • Press the button to 'Clear Element Data for Tests 1 & 2'.

This is intended to remove the innerHTML data, not the elements itself.

I want the elements to remain visible and usable, just empty of any data. I only want the data to be cleared.

How can I do this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

  $(&quot;#clear-values&quot;).click(function() {
    $(&quot;#utility-info&quot;).html(&#39;&#39;);
  });
});

<!-- language: lang-css -->

#actual-utils {
  display: none;
}

span {
  padding: 10px;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

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

<!-- end snippet -->

答案1

得分: 0

问题出在于您清除了#utility-info整个内容,其中包括input元素以及它们的值。

要解决这个问题,请将选择器更改为直接针对input元素,然后使用val('')来清除值。

还请注意,您可以通过缓存调用DOM时创建的jQuery对象,并使用toggle()方法根据复选框的布尔checked属性来隐藏/显示div元素,从而改进逻辑并使其更加简洁。

以下是一个工作示例:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
jQuery($ => {
  const $utilityInfo = $('#utility-info');
  const $actualUtils = $('#actual-utils');

  $('#actual').on('click', e => {
    const useActual = e.target.checked;
    $utilityInfo.toggle(!useActual);
    $actualUtils.toggle(useActual);
  });

  $('#clear-values').click(function() {
    $utilityInfo.find('input').val('');
  });
});

<!-- language: lang-css -->
#actual-utils {
  display: none;
}

span {
  padding: 10px;
}

<!-- language: lang-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>

<!-- end snippet -->

请注意,上述代码做了必要的更改,以便正确清除输入字段的值,并根据复选框的状态显示/隐藏相关的div元素。

英文:

The issue is because you're clearing the entire content of #utility-info, which contains the input elements as well as their values.

To fix the issue, change your selector to directly target the input elements and then use val(&#39;&#39;) to clear the values.

Also note that you can improve the logic and make it more succinct by caching the jQuery objects you create when making the calls to the DOM, and by using the toggle() method to hide/show the div elements based on the boolean checked property of the checkbox.

Here's a working example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

jQuery($ =&gt; {
  const $utilityInfo = $(&#39;#utility-info&#39;);
  const $actualUtils = $(&#39;#actual-utils&#39;);

  $(&#39;#actual&#39;).on(&#39;click&#39;, e =&gt; {
    const useActual = e.target.checked;
    $utilityInfo.toggle(!useActual);
    $actualUtils.toggle(useActual);
  });

  $(&#39;#clear-values&#39;).click(function() {
    $utilityInfo.find(&#39;input&#39;).val(&#39;&#39;);
  });
});

<!-- language: lang-css -->

#actual-utils {
  display: none;
}

span {
  padding: 10px;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

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

<!-- end snippet -->

答案2

得分: 0

以下是您要翻译的内容:

The "best™" might be to actually use declarative HTML that can do all this for you without JS. A <form>, and all its inner <input> elements, can be reset, to their original values, by a <button type="reset"> (or an equivalent <input type="reset">).

Besides being totally clear to AT, and machines what your markup is about, and to work where JS is disabled, it allows you to set an initial value and to reset it back.

/* 切换复选框以一次显示一个表单 */
#actual:checked ~ * #utility-info,
#actual:not(:checked) ~ * #actual-utils {
  display: none;
}
span {
  padding: 10px;
}
<input type="checkbox" id="actual" name="actual-util-info"> 使用实际数据
<div>&nbsp;</div>
<div id="energy-info">
  <!-- 包装在<form>元素中 -->
  <form id="utility-info">
    <div>测试1 <input id="test1" type="number" name="test1"></div>
    <div>测试2 <input id="test2" type="number" name="test2"></div>
  </form>
  <!-- 包装在<form>元素中 -->
  <form id="actual-utils">
    <div>测试3 <input id="actual1" type="number" name="actual1"></div>
    <div>测试4 <input id="actual2" type="number" name="actual2"></div>
  </form>
  <div>&nbsp;</div>
  <!--
    由于我们的重置按钮在<form>之外,
    我们使用form=""属性来指向正确的表单。
  -->
  <button id="clear-values" type="reset" form="utility-info">清除测试1和测试2的元素数据</button>
</div>
英文:

The "best™" might be to actually use declarative HTML that can do all this for you without JS. A &lt;form&gt;, and all its inner &lt;input&gt; elements, can be reset, to their original values, by a &lt;button type=&quot;reset&quot;&gt; (or an equivalent &lt;input type=&quot;reset&quot;&gt;).

Besides being totally clear to AT, and machines what your markup is about, and to work where JS is disabled, it allows you to set an initial value and to reset it back.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Toggle the checkbox to show one form at a time */
#actual:checked ~ * #utility-info,
#actual:not(:checked) ~ * #actual-utils {
  display: none;
}
span {
  padding: 10px;
}

<!-- language: lang-html -->

&lt;input type=&quot;checkbox&quot; id=&quot;actual&quot; name=&quot;actual-util-info&quot;&gt; Use actual data
&lt;div&gt;&amp;nbsp;&lt;/div&gt;
&lt;div id=&quot;energy-info&quot;&gt;
  &lt;!-- Wrap in &lt;form&gt; elements --&gt;
  &lt;form id=&quot;utility-info&quot;&gt;
    &lt;div&gt;Test 1 &lt;input id=&quot;test1&quot; type=&quot;number&quot; name=&quot;test1&quot;&gt;&lt;/div&gt;
    &lt;div&gt;Test 2 &lt;input id=&quot;test2&quot; type=&quot;number&quot; name=&quot;test2&quot;&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;!-- Wrap in &lt;form&gt; elements --&gt;
  &lt;form id=&quot;actual-utils&quot;&gt;
    &lt;div&gt;Test 3 &lt;input id=&quot;actual1&quot; type=&quot;number&quot; name=&quot;actual1&quot;&gt;&lt;/div&gt;
    &lt;div&gt;Test 4 &lt;input id=&quot;actual2&quot; type=&quot;number&quot; name=&quot;actual2&quot;&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;div&gt;&amp;nbsp;&lt;/div&gt;
  &lt;!--
    Since our reset button is outside the &lt;form&gt;
    We use the form=&quot;&quot; attribute to point to the correct one.
  --&gt;
  &lt;button id=&quot;clear-values&quot; type=&quot;reset&quot; form=&quot;utility-info&quot;&gt;Clear Element Data for Tests 1 &amp;amp; 2&lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月12日 02:13:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76451893.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定