Как скрыть динамически созданный элемент html с динамическим идентификатором

Question

У меня есть динамически создаваемые элементы html в цикле for в JavaScript, эти динамические элементы также имеют динамический идентификатор, мой вопрос в том, как скрыть динамически созданный элемент с помощью динамический идентификатор. Спасибо.

Это мой код. Я хочу настроить динамический идентификатор и скрыть его.

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

У него динамический идентификатор.

Answer 1

document.getElementById (a_data.products [i] .pid) .style.display = 'none';

Answer 2

Позвольте мне предположить, что вы используете jquery. Попробуйте что-то вроде этого:

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

или

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

или Если элемент находится внутри другого элемента с идентификатором 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 

Это становится sier, если вы уже знаете значения вашего счетчика циклов i.e значение i, если вы не знаете, что тогда вы также можете использовать селекторы, такие как n-й ребенок. Дайте мне знать, если что-либо из вышеперечисленных работ, иначе я выложу больше селекторов.

Answer 3

Я бы порекомендовал, что вы будете использовать классы вместо 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>