skillup1_list-add.js

$(function () {
  var $field = $('#field');
  var $btn = $('#btn');
  var $list = $('#list');

  var addItem = function () {
    var text = $field.val();
    $list.append('<li>' + text + '</li>');
    $field.val('');
  };

  $btn.on('click', addItem);
});

skillup1_list-fix.js

$(function () {
  var $field = $('#field');
  var $addBtn = $('#addBtn');
  var $list = $('#list');
  var messageList = [];

  var render = function () {
    var html = $.map(messageList, function (message, index) {
      var $row = $('<tr></tr>');
      var $removeCol = $('<td><button class="removeBtn" data-key="' + index + '">remove</button></td>');
      $row.append($removeCol);

      var $textCol = $('<th>' + message + '</th>');
      $row.append($textCol);

      var $rewriteCol = $('<td></td>');
      var $rewriteField = $('<input class="rewriteField" type="text" data-key="' + index + '">');
      $rewriteCol.append($rewriteField);

      var $rewriteBtn = $('<button class="rewriteBtn" type="button" data-key="' + index + '">rewrite</button>');
      $rewriteCol.append($rewriteBtn);
      $row.append($rewriteCol);

      return $row;
    });
    $list.html(html);
  };

  var addItem = function () {
    var text = $field.val();
    messageList.push(text);
    $field.val('');
    render();
  };
  $addBtn.on('click', addItem);

  var removeItem = function () {
    var key = $(this).data('key');
    messageList = $.grep(messageList, function (message, index) {
      return key !== index;
    });
    render();
  };
  $(document).on('click', '.removeBtn', removeItem);

  var rewriteItem = function () {
    var key = $(this).data('key');
    var value = $('.rewriteField').filter('[data-key="' + key + '"]').val();
    messageList[key] = value;
    render();
  };
  $(document).on('click', '.rewriteBtn', rewriteItem);

skillup1_list-remove.js

$(function () {
  var $field = $('#field');
  var $addBtn = $('#addBtn');
  var $list = $('#list');
  var messageList = [];

  var render = function () {
    var html = $.map(messageList, function (message, index) {
      var $row = $('<tr></tr>');
      var $btnCol = $('<td><button class="removeBtn" data-key="' + index + '">remove</button></td>');
      $row.append($btnCol);

      var $textCol = $('<th>' + message + '</th>');
      $row.append($textCol);
      return $row;
    });
    $list.html(html);
  };

  var addItem = function () {
    var text = $field.val();
    messageList.push(text);
    $field.val('');
    render();
  };
  $addBtn.on('click', addItem);

  var removeItem = function () {
    var key = $(this).data('key');
    messageList = $.grep(messageList, function (message, index) {
      return key !== index;
    });
    render();
  };
  $(document).on('click', '.removeBtn', removeItem);
});

skillup1_react-es5.js

var App = React.createClass({
  getInitialState: function () {
    return {
      messages: []
    };
  },

  handleAddClick: function () {
    var messages = this.state.messages;
    var addField = this.refs.addField;
    var text = addField.value;
    messages.push(text);
    this.setState({messages: messages});
    addField.value = '';
  },

  handleRemoveClick: function (index) {
    var messages = this.state.messages.filter(function (message, i) {
      return i !== index;
    });
    this.setState({messages: messages});
  },

  handleChange: function (index) {
    var messages = this.state.messages;
    var text = this.refs.changeField.value;
    messages[index] = text;
    this.setState({messages: messages});
  },

  render: function () {
    return (
      <div>
        <p>
          <input
           ref="addField"
           type="text" />

          <button
           type="button"
           onClick={this.handleAddClick}>add</button>
        </p>

        <table>
          {this.state.messages.map((message, i) =>
            <tr key={i}>
              <td>
                <button
                 type="text"
                 onClick={this.handleRemoveClick.bind(this, i)}>remove</button>
              </td>

              <th>{message}</th>

              <td>
                <input
                 ref="changeFiled"
                 type="text"
                 value={message}
                 onChange={this.handleChange.bind(this, i)} />
              </td>
            </tr>
          )}
        </table>
      </div>
    );
  }
});

ReactDOM.render(<App />, document.getElementById('app'));

skillup1_react-es6.js

class App extends React.Component {
  constructor() {
    this.state = {
      messages: []
    };

    handleAddClick = () => {
      const messages = this.state.messages;
      const addField = this.refs.addField;
      const text = addField.value;
      messages.push(text);
      this.setState({messages});
      addField.value = '';
    };

    handleRemoveClick = index => {
      const messages = this.state.messages.filter((message, i) =>
        i !== index);
      this.setState({messages});
    };

    handleChange = index => {
      const messages = this.state.messages;
      const text = this.refs.changeFiled.value;
      messages[index] = text;
      this.setState({messages});
    };
  }

  render() {
    return (
      <div>
        <p>
          <input
           ref="addField"
           type="text" />

          <button
           type="button"
           onClick={this.handleAddClick.bind(this)}>add</button>
        </p>

        <table>
          {this.state.messages.map((message, i) =>
            <tr key={i}>
              <td>
                <button
                 type="text"
                 onClick={this.handleRemoveClick.bind(this, i)}>remove</button>
              </td>

              <th>{message}</th>

              <td>
                <input
                 ref="changeFiled"
                 type="text"
                 value={message}
                 onChange={this.handleChange.bind(this, i)} />
              </td>
            </tr>
          )}
        </table>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));