单击按钮时如何从页面（Bootstrap 4）中隐藏或删除搜索表单？

Question

How can I get this search form and the Search Button to disappear from the page, since it will be replaced by a Thank you message?

<div class="row">
      <div class="col">

        <!-- ## SEARCH FORM ------------------------------------------------ -->
        <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
          <div class="form-group mb-2">
            <label for="searchtext">Enter your email</label>
          </div>
          <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
          </div>
          <button type="submit" class="btn btn-primary mb-2">Search</button>
        </form>
        <!-- ## SEARCH FORM ~ END ------------------------------------------- -->

      </div>
    </div>

I was trying something like:

//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
  google.script.run.withSuccessHandler(createTable).processForm(formObject);
}

function saveData() {
  var searchForm = document.getElementById('search-form')
  var page = document.getElementById("page");
  var table = document.getElementById("dtable");

  //document.getElementById("search-form").reset();
  page.innerHTML = "";
  search-form... = ""//????
  table.innerHTML = "<h4>Thank you!</h4>";
}

Answer 1

You have onsubmit="handleFormSubmit(this) so you better to add your <h4>Thank you!</h4> code inside of handleFormSubmit() , but anyway, you may do it like this:

<div class="row">
  <div class="col">
    <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
      <div class="form-group mb-2">
        <label for="searchtext">Enter your email</label>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
      </div>
      <button type="submit" class="btn btn-primary mb-2" id="searchButton" onclick="saveData();">Search</button>
    </form>
  </div>
</div>

<script type="text/javascript">
    function insertAfter(newNode, existingNode) {
      existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function saveData() {
      var searchForm = document.getElementById('search-form');
      var searchButton = document.getElementById("searchButton");

      var thankYouDiv = document.createElement('div');
      thankYouDiv.innerHTML = "<h4>Thank you!</h4>";

      insertAfter(thankYouDiv,  searchForm.lastElementChild);
    }
</script>

Answer 2

var searchForm = document.getElementById('search-form');
var page = searchForm.parentElement;

// Set new result
page.innerHTML =