如何隐藏动态创建的具有动态ID的html元素

How to hide dynamically created html element with a dynamic ID

本文关键字：动态 ID html 元素 何隐藏 创建 隐藏      更新时间：2023-09-26

我在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。

我建议您使用class而不是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>

document.getElementById(a_data.products[i].pid).style。

让我假设您正在使用jquery。试试这样做:

$(".plProductContainer.hide").hide();

或

var elementId = $(".plProductContainer.hide").attr("id");
$("#"+elementId).hide();

或如果你的元素在另一个id为someId的元素中，那么:

$("#"+someId).children()[i].hide(); //i is the loop counter that you have used to create element dynamically

或

$("#"+a_data.products[i].pid).hide(); //i is the loop counter that you have used to create element dynamically

如果你已经知道你的循环计数器的值，即i的值，它会变得更容易，如果你不知道，那么你也可以使用选择器，如n子。如果上面的方法有效，请告诉我，否则我会添加更多的选择器。

相关文章：