如何在单击按钮时从页面 (Bootstrap 4) 隐藏或删除搜索表单？

Question

我怎样才能让这个搜索表单和搜索按钮从页面上消失，因为它将被感谢消息取代？

<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>

我正在尝试类似的东西：

//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

你有 onsubmit="handleFormSubmit(this) 所以你最好在 handleFormSubmit() 中添加你的 <h4>Thank you!</h4> 代码，但无论如何，你可以这样做：

<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 =

如何在单击按钮时从页面 (Bootstrap 4) 隐藏或删除搜索表单？

How to hide or remove the search form from the page (Bootstrap 4) on clicking a button?

html

javascript

bootstrap-4