"Uncaught SyntaxError: Unexpected token }"

Question

我不知道这个语法错误是从哪里来的。它在我的控制台中显示为 index.html:2，但这似乎不正确。

这是我的 javascript:

$('#add').click(function (event) {
    event.preventDefault();
    var newItem = document.momList.newItem.value;
    if (newItem) {
        var $listItem = $('<li id="' + newItem + '"><button class="delete" onclick="removeListItem("' + newItem + '");">X</button></li>');
        var $item = $('<span class="item">').text(newItem);
        $listItem.append($item);
        $('#list').append($listItem);
    }
});

function removeListItem(itemID) {
    var el = document.getElementById(itemID);
    el.remove();
}

这是 HTML：

<head>
    <meta charset="UTF-8">
    <title>Mother's Shopping List</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>Mother's Shopping List</h1>
    </header>
    <main>
        <form name="momList">
            <input id="newItem" type="text" required>
            <input type="submit" id="add" value="Add" class="add">
        </form>
        <div class="shoppingList">
            <ul id="list" class="shoppingList"></ul>
        </div>
    </main>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

我想做的是在单击添加按钮时创建一个新的列表项。每个列表项都有一个删除按钮，我想在单击时删除该列表项。我无法使用删除按钮。

Answer 1

引号似乎导致 onclick 出现问题。使用 \' 添加转义的 ' 代替 onclick 的引号，它应该可以正常工作。 https://jsfiddle.net/5nnvu7vn/3/

$('#add').click(function (event) {
    event.preventDefault();
    var newItem = document.momList.newItem.value;
    if (newItem) {
        var $listItem = $('<li id="' + newItem + '"><button class="delete" onclick="removeListItem(\'' + newItem + '\');">X</button></li>');
        var $item = $('<span class="item">').text(newItem);
        $listItem.append($item);
        $('#list').append($listItem);
    }
});

function removeListItem(itemID) {
    var el = document.getElementById(itemID);
    el.remove();
}

Answer 2

我建议使用绑定到 html 属性之外的按钮的事件处理程序：

$('#add').click(function (event) {
    event.preventDefault();
    var newItem = document.momList.newItem.value;
    if (newItem) {
        var $listItem = $('<li id="' + newItem + '"><button class="delete">X</button></li>');
        var $item = $('<span class="item">').text(newItem);
        $listItem.append($item);
        $('#list').append($listItem);
    }
});

$(document).on("click", ".delete", function (e) {
    console.log("im here");
    var el = $(e.target).parent();
    el.remove();
});

这可以防止双引号等问题，并且是一个更简洁的解决方案，因为 JavaScript 不在 html 中。

"Uncaught SyntaxError: Unexpected token }"

"Uncaught SyntaxError: Unexpected token }"

javascript

jquery

syntax-error