2013-10-16 67 views
0

如何从asp:Repeater删除项目?目前,我有中继器下面的代码:使用jQuery从asp:Repeater中删除项目

<asp:Repeater ID="uxRolesList" runat="server"> 
    <ItemTemplate>      
     <div id="<%# GetRolesDivId() %>"> 
      <asp:TextBox ID="uxTxtBoxRole" runat="server" rows="5" columns="100" Text='<%# Container.DataItem %>' TextMode="multiline" MaxLength="2000"></asp:TextBox> 
      <asp:Button ID="uxRemoveRoleBtn" Style="vertical-align:top;" CssClass="remove-roles-btn" runat="server" Text="X" /> 
      <br /> 
      <asp:RequiredFieldValidator runat="server" ID="uxValTxtBoxRole" ControlToValidate="uxTxtBoxRole" ErrorMessage="Please complete this role requirement"></asp:RequiredFieldValidator> 
      <br /><br /> 
     </div> 
    </ItemTemplate> 
</asp:Repeater>  

应该输出是这样的:

<div id="roles-1"> 
    <textarea name="ctl00$mainContent$uxRolesList$ctl01$uxTxtBoxRole" rows="5" cols="100" id="ctl00_mainContent_uxRolesList_ctl01_uxTxtBoxRole">Quick test</textarea>       <input type="submit" name="ctl00$mainContent$uxRolesList$ctl01$uxRemoveRoleBtn" value="X" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$mainContent$uxRolesList$ctl01$uxRemoveRoleBtn&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_mainContent_uxRolesList_ctl01_uxRemoveRoleBtn" class="remove-roles-btn" style="vertical-align:top;" /> 
    <br /> 
    <span id="ctl00_mainContent_uxRolesList_ctl01_uxValTxtBoxRole" class="error" style="color:#891F11;display:none;">Please complete this role requirement</span> 
    <br /><br /> 
</div> 

而且我使用下面的jQuery来“删除”的项目时删除按钮被点击:

$("#roles-" + roleIdNumber).remove(); 
e.preventDefault(); 
rolesCounter--; 

其中roleIdNumber在这种情况下是1。

但是,当我提交表单,该项目仍然出现 - 任何人都可以帮助我发生了什么?

+0

如果您转换了表单,那么它将再次绑定数据,所以如果记录仍然存在,它将被重新生成 – DavidB

+1

您可以粘贴完整的aspx和javascript部分吗? –

+0

把年代码放在文件准备好功能上。 –

回答

0

我建议替换:

<div id="<%# GetRolesDivId() %>"> 

与:

<div id="<%# GetRolesDivId() %>" class="div_row"> 

和这一行:

<asp:Button ID="uxRemoveRoleBtn" Style="vertical-align:top;" CssClass="remove-roles-btn" runat="server" Text="X" /> 

与:

<input type="button" style="vertical-align:top;" value="X" class="remove-roles-btn" onclick="$(this).parents('.div_row').remove();rolesCounter--;" /> 

并删除您在此共享的所有js代码。

希望它有帮助。

+0

你是个天才 - 谢谢! –

+0

你非常欢迎 – geevee

0

它可能不起作用,因为在Document.Ready函数调用完成执行后,中继器项目被添加到DOM。

如果您的中继器在页面加载完成后提取数据,请考虑使用Jquery's on() methoddelegate method