Question

我有这个javascript，它添加了一个表单字段，以及一个删除该字段的链接：

var fieldCount = 0;
function addField() {
    var name = 'file' + fieldCount;
    var row = 'row' + fieldCount;
    var str = '<p id="' + row + '"><label for="' + name + '">File to upload: <input type="file" name="' + name + '" id="' + name + '" />(100MB max size) <a onclick="removeRow(' + row + '); return false;">[-]</a></label></p>';
    fieldCount++;
    $("#fields").append(str);
};
function removeRow(id) {
    $(id).remove();
};

这是标记：

<form id="ajaxUploadForm" action="<%= Url.Action("AjaxUpload", "Upload")%>" method="post" enctype="multipart/form-data">
    <fieldset id="uploadFields">
        <legend>Upload a file</legend>
        <div id="fields"></div>
        <input id="ajaxUploadButton" type="submit" value="Submit" />            
    </fieldset>
    <a onclick="addField(); return false;" id="add">Add</a>
    <div id="resultBox">
        <p id="status" style="margin:10px;"></p>
    </div>
</form>

addFields按预期工作，但当我点击删除链接时，firebug告诉我“row＃”没有定义，其中＃是任意数量的添加字段。

任何帮助将不胜感激！

Answer 1

您需要在#调用中为ID选择器（ID removeRow ）传递有效的选择器表达式（还要注意周围的引号） ID选择器）：

'<a onclick="removeRow(\'#' + row + '\'); return false;">'

或removeRow函数本身：

function removeRow(id) {
    $("#" + id).remove();
};

Answer 2

你需要在它周围加上引号，因为它是一个字符串。你还需要“＃”使它成为一个选择器：

var str = '... <a onclick="removeRow(\'#' + row + '\'); return false;">...';

更好的方法是将onclick分配为一个函数（不确定jQuery的方式，但是在普通的Javascript中）：

var a = document.createElement('a');
a.onclick = (function(row)
{
    return function()
    {
        removeRow(row);
        return false;
    };
})();

Answer 3

您传入的字符串值为“row12”，但选择器应为：

$('#'+row').remove()

＃指定您正在寻找ID。我同意我认为其他答案之一就是说，你应该只使用onclick事件'自然“这个”关键字：

<p onclick="remove(this)">something</p>

function remove(what) {
 $(what).remove()
}

或者，也许只是忘记整个事情并切换到这些行的行为：

$('.removableRow').live('click', function() {$(this).remove()});

然后你只需指定该行是可移动的，而且根本不必担心绑定事件：

<p><a class="removableRow" href="#">Remove</a></p>

元素没有定义jQuery $（element）.remove（）

3 个答案: