为此，您需要使用click事件https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
最好的方法是在你想要点击的元素上添加一个id，下面是代码：

document.getElementById('foo').addEventListener('click', function (event) {
  document.getElementById('bar').style.display = 'none'
});

<div id="foo">Hide bar</div>
<div id="bar">Bar</div>

首先你需要给予<p>和第二个搜索图标一个清晰的类，这样你就可以在dom中选择它们：

<div id="intro">
  <p class="text">Simply click on the &nbsp;<i class="fas fa-search"></i>&nbsp; and type the name of where you would like to visit</p>
  <div class="search-box">
    <input id="searchBox" type="text" placeholder="Search your location">
    <div class="search-icon">
      <i class="fas fa-search search-icon"></i>
    </div>
    <div class="cancel-icon">
      <i class="fas fa-times"></i>
    </div>
    <div class="search-data"></div>
  </div>
</div>

那么对于JS部分，首先需要选择该段落和第二个搜索图标：

const searchIcon = document.querySelector(".search-icon");
const text = document.querySelector(".text");

searchIcon.addEventListener("click", function () {
  if (window.innerWidth <= 768) {
    text.classList.add("hide-text");
  }
});

为了真正隐藏文本，你需要添加一个css类：

.hide-text {
  display: none;
}

使用Collapsible from Bootstrap轻松快速地解决问题

你的问题有误会。
如果你想隐藏任何元素，你可以通过它的ID或者类名来选择它，这里我使用了类名，因为有两个元素有相同的类名，所以我手动选择了第一个，代码如下：

document.getElementsByClassName("fas fa-search")[0].hidden = true

document.querySelector('.search-icon').addEventListener('click', function (event) {
  document.getElementById('para').style.display = 'none'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<div id="intro"> 
            <p id="para">Simply click on the &nbsp;
 <i class="fas fa-search"></i>&nbsp; and type the name of where you would like
            to visit</p>
        <div class="search-box">
            <input id="searchBox" type="text" placeholder="Search your location">
            <div class="search-icon">
                <i class="fas fa-search"></i>
            </div>
            <div class="cancel-icon">
                <i class="fas fa-times"></i>
            </div>
            <div class="search-data"></div>
        </div>
    </div>