How to remove a row <h:datatable> programmatically - jsf

Question

I have a form like the following picture.
In the above picture you can see a green add button. When I click on it, it create a new row in a datatable via send a <f:ajax> to backing bean and render <h:datatable>.
Until now all thing is good. But i Except when I click on a cross button inside of each row, that row removed. but it have a bug. for example when I click on the third row cross button, it removes this row from backing bean but not from my ui.
in the following you can see my backing bean and .xhtml file.
#ManagedBean(name = "AddPollContorler")
#ViewScoped
public class AddPollControl {
private List<Answer> answers = new ArrayList<Answer>();
#PostConstruct
public void init(){
answers.add(new Answer());
answers.add(new Answer());
}
public List<Answer> getAnswers() {
return answers;
}
public void setAnswers(List<Answer> answers) {
this.answers = answers;
}
public void addAnswer() {
answers.add(new Answer());
}
public void removeAnswer() {
String index=FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("index");
if (StringUtil.isNumber(index))
answers.remove(Integer.parseInt(index));
}
}
.xhtml :
<div class="panel panel-success rgt">
<div class="panel-heading rgt">
<div style="float: left;">
<h:commandLink styleClass="btn btn-success table-button" action="#{AddPollContorler.addAnswer}">
<h:graphicImage library="img" name="add.png" styleClass=" table-icon" />
<f:ajax execute="answers" render="answers"></f:ajax>
</h:commandLink>
</div>
<h4><h:outputText value="#{msg['protected.poll.add.answers']}"/></h4>
</div>
<div class="form-margin">
<h:dataTable value="#{AddPollContorler.answers}" var="answer" id="answers" style="width:100%;">
<h:column >
<div class="input-group poll-answer" style="margin: 5px;">
<span class="input-group-addon no-left-radius"><h:outputText value="#{CounterControler.index+1}" /></span>
<h:inputText value="#{answer.text}" styleClass="form-control no-radius"/>
<div class="input-group-addon no-right-radius poll-answer-remove" >
<h:commandLink action="#{AddPollContorler.removeAnswer}">
<h:graphicImage library="img" name="cross.png" />
<f:param name="index" value="#{CounterControler.last}" />
<f:ajax render="answers answers" />
</h:commandLink>
</div>
</div>
</h:column>
</h:dataTable>
</div>
</div>
update: 2013/06/12
#ManagedBean(name="CounterControler")
public class CounterControl {
private int index=0;
public int getIndex(){
return index++;
}
public int getLast(){
return index-1;
}
}

Answer 1

your code does look pretty good already. How does the CounterControler internally work? (no source given) Alternatives to send the current object might be
to give the object directly as the parameter (you need a fitting converter for that),
give it as direct parameter (action="#{AddPollContorler.removeAnswer(answer)}, works from EL 2.2 on), or
directly get the current object out of the given ActionEvent
The last point would look like
xhtml
<h:commandLink action="#{AddPollContorler.removeAnswer}">
<h:graphicImage library="img" name="cross.png" />
<f:ajax render="answers" />
</h:commandLink>
managed bean
public void removeAnswer(ActionEvent ev) {
Answer selectedItem = null;
try {
UIDataTable objHtmlDataTable = retrieveDataTable(
(UIComponent)ev.getSource());
selectedItem = (Answer) objHtmlDataTable.getRowData();
answers.remove(answer);
} catch (NullPointerException e) {
// somehow couldn't find the element
}
}
private static UIDataTable retrieveDataTable(UIComponent component) {
if (component instanceof UIDataTable) {
return (UIDataTable) component;
}
if (component.getParent() == null) {
return null;
}
return retrieveDataTable(component.getParent());
}
I like that one because it takes most logic out of the frontend. Hope you get your rows cleaned with one of that tactics.
Also, you only need to mention answers once in <f:ajax render="answers" />
EDIT: Even I don't know why - wrapping a <h:panelGroup layout="block" id=" answersWrapper"> around the <h:dataTable> and rendering that panelGroup worked for me.
<h:form id="myForm">
<h:panelGroup id="answerWrapper" layout="block">
<rich:dataTable value="#{myTestBean.answers}" var="answer" id="answers">
<h:column >
<h:outputText value="#{answer}"/>
<h:commandButton id="button" action="#{myTestBean.doTheAction}">
<f:ajax render=":myForm:answerWrapper" />
</h:commandButton>
</h:column>
</rich:dataTable>
</h:panelGroup>
</h:form>