Question

我有一个asp:listview控件，它从后面的代码中的数据绑定数据表中填充数据，以创建动态列表。使用该列表，我有一个链接按钮，我希望绑定到JavaScript函数，以便在单击时隐藏相应的li元素。这是我的HTML：

<asp:ListView ID="lstAIInsureds" runat="server">
    <LayoutTemplate>
        <ul class="collection">
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />    
        </ul>                
    </LayoutTemplate>
    <ItemTemplate>
        <li class="collection-item" id="liRemoveAI">
            <div>
                <%#Eval("Response").ToString().Replace("|",", ")%>
                    <asp:LinkButton ID="lbRemoveAI" class="material-icons" ClientIDMode="Static" OnClientClick="return RemoveAI();" runat="server">remove_circle</asp:LinkButton>
            </div>
        </li>   
    </ItemTemplate>
    <EmptyDataTemplate>
        <p>Nothing here.</p>
    </EmptyDataTemplate>
</asp:ListView>

我背后的代码就像这样绑定：

this.lstAIInsureds.DataSource = dt;
this.lstAIInsureds.DataBind();

这是我目前的JS，但当然在for循环中存在空白，这是我需要完成的事情：

 function RemoveAI() {
        var olsRemoveAI = document.getElementById("liRemoveAI"); //this is the ls that is to be hidden
        var obtRemoveAI = document.getElementById("lbRemoveAI"); //this is the linkbutton that is clicked to hide the parent ls element

        for (i = 0; i < olsRemoveAI.???.length; i++) {
            //if this button is contained in the parent li, mark the li as hidden:
            olsRemoveAI.style.visibility = "hidden";
            olsRemoveAI.style.display = "none";

            //else:
            olsRemoveAI.style.visibility = "visible";
            olsRemoveAI.style.display = "block";
        }

        return false;
 }

这可行吗？非常感谢帮助！

Answer 1

由于元素 lbRemoveAI 在“server”运行，您需要查看页面的HTML输出并获取最终的客户端ID，然后使用该元素ID更新您的javascript。

Answer 2

获取父元素：

var buttonParent = document.getElementById("lbRemoveAI").parentElement;

当然，这将返回div而不是li。看起来您可以简单地删除div并更改一些CSS，或者您可以使用.parentElement两次。

Read this，这是关于.parentElement。

然后，您可以使用：

buttonParent.style.display = 'none';

或者，使用jquery：

$(buttonParent).hide();

更新：

这是可行的jQuery。你应该真正使用一个类，而不是按钮的ID。使用（this）将引用单击的确切按钮。你可能不想要jQuery，但我不知道如何用普通的JS做到这一点。如果你不能使用jQuery，应该很容易弄清楚如何改变它。

var obtRemoveAI = document.getElementById("lbRemoveAI");
$(obtRemoveAI).click(function() {
  $(this).parentElement.hide()
});

如何在使用JavaScript

2 个答案: