javascript - 如何使用动态 ID 隐藏动态创建的 html 元素

Question

我在JavaScript的for循环下有一个动态创建的html元素，这些动态元素也有一个动态id，我的问题是如何用动态id隐藏动态创建的元素。谢谢。

这是我到目前为止的代码。我想定位动态 ID 并隐藏它。

product_list += '<div class="plProductContainer hide" data-pids="' + a_data.products[i].pid + '" id="'+a_data.products[i].pid+'">'; 

它有一个动态 ID。

Answer 1

我建议您使用类而不是 id，但对于此示例，您可以使用类似的内容。使用类隐藏元素。

$(document).ready(function(){
  $(function(){
    $(".add-more").on("click", function(){
      var list  = $(".list");
      
      var random_id = Math.floor(Math.random() * (99999 - 1 + 1)) + 1;
      
      var child = document.createElement("li");
      var text  = document.createTextNode("Lorem Ipsum");
          child.setAttribute("id", random_id);
          child.appendChild(text);
      
      list.append(child);
    });
  });
  
  $(function(){
    $(".list").on("click", "li", function(){
      var id = $(this).attr("id");
      $("#" + id).addClass("hidden");
      
      console.log("This id: " + id + " is hidden");
    });
  });
});

a{
  color: blue;
  cursor: pointer;
}

ul{
  margin-top: 20px;
  padding: 0;
}

li{
  list-style: none;
  cursor: pointer;
}
li:hover{
  color: red;
}
li + li{
  margin-top: 20px;
}
li.hidden{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div>
  <a class="add-more">Click me!</a>
</div>

<ul class="list">
  <li id="0">Lorem Ipsum</li>
</ul>