购物清单App-Jquery

时间:2017-02-02 19:20:02

标签: javascript jquery

我是Thinkful的学生,我有一个挑战,我需要创建一个购物清单应用程序,它将使用jquery添加,永久删除和检查列表中的项目。这是我到目前为止的代码以及我认为删除该项目可能有用的内容但显然不是。我可以添加项目但不能删除。任何帮助!!?

//set the state
var state = {
	items: []
};
//function to modify the state
var addItem = function(state, item) {
	state.items.push(item);
}
var deleteItem = function(state, this) {
	state.this.remove(this);
}
//render the list
var renderList = function(state, element) {
	var itemsHTML = state.items.map(function(item) {
		return '<li><span class="shopping-item">' + item  +
		'</span><div class="shopping-item-controls">' + 
          '<button class="shopping-item-toggle">' +
            '<span class="button-label">check</span> </button>' +
          ' <button class="shopping-item-delete"><span class="button-label">delete</span>' +
          '</button> </div>';
	});
	element.html(itemsHTML);
};
//event listeners
$('.js-shopping-list-add').submit(function(event) {
	event.preventDefault();
	addItem(state, $('.js-shopping-list-add-input').val());
	renderList(state, $('.shopping-list'));
});
//delete item
$('.shopping-item-delete').click(function(event) {
	event.preventDefault();
	deleteItem();
});
 <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form" class="js-shopping-list-add">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli" class="js-shopping-list-add-input">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">
      <li>
        <span class="shopping-item">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>

1 个答案:

答案 0 :(得分:0)

变化

var deleteItem = function(state, this) {
    state.this.remove(this);
}

var deleteItem = function(state, this) {
    state.items.remove(this);
}