如何在 html 中隐藏列表元素

Question

我想在单击按钮时隐藏列表元素。我试过在 Javascript.

这不起作用。

document.getElementById("1").children[0].style.display = "none"

示例：

<script>
  function hid() {
    document.getElementById("1").children[0].style.display = "none"
  }
</script>
<div class="container-fluid">
  <div class="column">
    <div class="col-md-2 ">
      <ul class="list-group" id="1">
        <li id="2"><a href="{% url 'search:barbars' %}" class="list-group-item list-group-item-action">barbar
                        <div class="image-parent">
                           <img src="http://cool-web.de/icons/images/024800/024768.ico" class="img-fluid" alt="nothing">
                        </div>
    
    
    <!-- The Button -->
    <button onclick="hid" class="btn btn-outline-success my2 my-sm-0" type="submit">Search</button>

Answer 1

您需要停止按钮的默认操作 - 将事件传回您的函数以便您可以阻止该操作：

<script>
  function hid(event) { /* add event to function */
    event.preventDefault(); /* prevent default action of button */
    document.getElementById("1").children[0].style.display = "none"
  }
</script>
<ul class="list-group" id="1">
  <li id="2">
    <a href="{% url 'search:barbars' %}" class="list-group-item list-group-item-action">barbar
      <div class="image-parent">
          <img src="http://cool-web.de/icons/images/024800/024768.ico" class="img-fluid" alt="nothing">
      </div>
    </a>
  </li>
</ul>


<!-- pass the event back into the function -->
<button onclick="hid(event)" class="btn btn-outline-success my2 my-sm-0" type="submit">Search</button>

如何在 html 中隐藏列表元素

How to hide a list element in html

html

django

list

hide