Question 183527 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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?

$(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('');
  });
});
#actual-utils {
  display: none;
}

span {
  padding: 10px;
}
<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>
Tags:

2

Answers


  1. 0

    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('') 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:

    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('');
  });
});
    #actual-utils {
  display: none;
}

span {
  padding: 10px;
}
    <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>
    Login or Signup to reply.
  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.

    /* Toggle the checkbox to show one form at a time */
#actual:checked ~ * #utility-info,
#actual:not(:checked) ~ * #actual-utils {
  display: none;
}
span {
  padding: 10px;
}
    <input type="checkbox" id="actual" name="actual-util-info"> Use actual data
<div>&nbsp;</div>
<div id="energy-info">
  <!-- Wrap in <form> elements -->
  <form 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>
  </form>
  <!-- Wrap in <form> elements -->
  <form 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>
  </form>
  <div>&nbsp;</div>
  <!--
    Since our reset button is outside the <form>
    We use the form="" attribute to point to the correct one.
  -->
  <button id="clear-values" type="reset" form="utility-info">Clear Element Data for Tests 1 &amp; 2</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search