redux

src/actions/headergroup.js

@@ -7,6 +7,7 @@ export const deleteLastElement = () => ({
   type: 'DELETE_LAST_ELEMENT'
 })
 
-export const deleteElement = () => ({
-  type: 'DELETE_ELEMENT'
+export const deleteElement = (element) => ({
+  type: 'DELETE_ELEMENT',
+  element
 })

src/components/ElementGroup.js

@@ -9,12 +9,6 @@ import * as HeaderGroupActions from '../actions/headergroup'
 
 @autobind
 class ElementGroup extends React.Component {
-  deleteElement(element) {
-    const index = this.state.elements.indexOf(element)
-    const elements = ReactAddonsUpdate(this.state.elements, { $splice: [[index, 1]] })
-    this.setState({elements: elements})
-  }
-
   sidebar() {
     return document.getElementById('sidebar')
   }
@@ -26,7 +20,7 @@ class ElementGroup extends React.Component {
         {
           elements.map(function(element) {
             return (
-              <Element meta_element={ element } key={ "key_" + element.id } id={ element.id } name={ element.name } initialPos={ element.initialPos } target_type={ element.target_type } handleCloneElement={ actions.cloneElement } handleDeleteElement={ this.deleteElement } handleDeleteLastElement={ actions.deleteLastElement } />
+              <Element meta_element={ element } key={ "key_" + element.id } id={ element.id } name={ element.name } initialPos={ element.initialPos } target_type={ element.target_type } handleCloneElement={ actions.cloneElement } handleDeleteElement={ actions.deleteElement } handleDeleteLastElement={ actions.deleteLastElement } />
             )
           }.bind(this))
         }

src/reducers/headergroup.js

@@ -15,6 +15,12 @@ const headergroup = (state = init_state, action) => {
       return [
         ...state.slice(0, -1),
       ]
+    case 'DELETE_ELEMENT':
+      const index = state.indexOf(action.element)
+      return [
+        ...state.slice(0, index),
+        ...state.slice(index + 1)
+      ]
     default:
       return state
   }