Make a repeater linkbutton hidden with javascript

Question

I have a repeater and some items in it. One of these items is a linkbutton. I want to hide it and actually I can but only the first one. I mean if repeater displays 4 records, only the first one's linkbutton becomes hidden. I can see that I need a loop to turn inside the repeater and hide all linkbuttons but I really stuck since I am beginner in javascript. Here is my repeater:

<asp:Repeater DataSourceID="EntityDataSourceHdcvi" ID="Repeater1" runat="server">
   <ItemTemplate>
        //Some other code
        <div id="silBeni" class="sil fl">
          <asp:LinkButton ID="deleteProduct" runat="server" Text="Kaldır" CommandArgument='<%#Eval("UrunId")%>' CommandName="deleteProduct" OnClick="LinkButton_Click"></asp:LinkButton>
        </div>
   </ItemTemplate>
</asp:Repeater>

And my javascript code:

function hideColumn() {
    sartnameDiv.style.display = 'block';

    var bizimDiv = document.getElementById("silBeni");
    bizimDiv.style.display = "none";
} 

Answer 1

What you could do is to search by class. There cannot be several elements with the same id, so instead we search several elements by class.

var elements = document.getElementsByClassName("sil");

Array.prototype.forEach.call(elements, function(element) {
  element.style.display = "none";
});

Note that ordinary array functions cannot be used on the result from getElementsByClassName, so that is why you need the

 Array.prototype.forEach.call 

instead of just writing like for an ordinary array.

elements.forEach(function(element){
});

Do note however, that now we will find all elements that have the class sil, meaning that if you have more elements with this class on the page, they will also be found, so you may have to adjust your html accordingly.

Edit: as per Webruster's comment, we also need to make sure that the function gets called when we want it to get called.