如何隐藏具有动态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> 

Answer 2

document.getElementById（a_data.products [i] .pid）.style.display ='none';

Answer 3

让我假设您正在使用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个孩子之类的选择器。 让我知道以上任何一项是否有效，否则我将提出更多选择器。