title: FXML, JavaFX 8, TableView: Make a delete button in each row and delete the row accordingly
body: <p>I am working on a TableView (FXML) where I want to have all the rows accompanied with a delete button at the last column.</p>
  
  <p>Here's a video that shows what I mean: <a href="https://www.youtube.com/watch?v=4UlHH0hx7_8" rel="noreferrer">YouTube Delete Button in TableView</a></p>
  
  <p>Here's what I have in my main controller class:</p>
  
  <pre><code>public Button del() {
      Button del = new Button();
      del.setText("X");
      del.setPrefWidth(30);
      del.setOnAction(new EventHandler&lt;ActionEvent&gt;() {
          public void handle(ActionEvent event) {
              int i = index.get();
              if(i &gt; -1) {
                  goals.remove(i);
                  list.getSelectionModel().clearSelection();
              }
          }
      });
      return del;
  }
  
  private SimpleIntegerProperty index = new SimpleIntegerProperty();
  
  @Override
  public void initialize(URL location, ResourceBundle resources){
      //DateFormat df = new SimpleDateFormat("dd MMM yyyy");
      sdate.setValue(LocalDate.now());
      edate.setValue(LocalDate.now());
  
      seq.setCellValueFactory(new PropertyValueFactory&lt;Goals, Integer&gt;("id"));
      gol.setCellValueFactory(new PropertyValueFactory&lt;Goals, String&gt;("goal"));
      sdt.setCellValueFactory(new PropertyValueFactory&lt;Goals, Date&gt;("sdte"));
      edt.setCellValueFactory(new PropertyValueFactory&lt;Goals, Date&gt;("edte"));
      prog.setCellValueFactory(new PropertyValueFactory&lt;Goals, Integer&gt;("pb"));
      del.setCellValueFactory(new PropertyValueFactory&lt;Goals, Button&gt;("x"));
  
      list.setItems(goals);
      list.getSelectionModel().selectedItemProperty().addListener(new ChangeListener&lt;Object&gt;() {
          @Override
          public void changed(ObservableValue&lt;?&gt; observable,
                  Object oldValue, Object newValue) {
              index.set(goals.indexOf(newValue));
              System.out.println("Index is: "+goals.indexOf(newValue));
          }
  
      });
  }
  </code></pre>
  
  <p>Each time I launch the application, I will try to click the delete button from random rows but it always delete the first row. I guess the addListener method I use for list is not properly implemented and indexOf(newValue) is always 0 at every initialisation.</p>
  
  <p>However, it will work if I click a row first and then click the delete button. But this is not what I want. I want users to be able to delete any row if they press the delete button without selecting the row.</p>
  
  <p>Appreciate your help guys!</p>