代码之家 › 专栏 › 技术社区 › Anders

元素未定义jquery$(element).remove()。

dom asp.net-mvc jquery javascript

2

Anders · 技术社区 · 15 年前

我有这个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时,它告诉我没有定义“行”,其中是任何数量的添加字段。

任何帮助都将不胜感激!

3 回复 | 直到 15 年前

1

4

Gumbo 15 年前

需要为ID选择器传递有效的选择器表达式( # ID )中的任何一个 removeRow 调用(还要注意ID选择器周围的引号):

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

或者在 遥控器 函数本身:

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

2

Greg 15 年前

你需要在它周围加引号,因为它是一个字符串。您还需要“”使其成为选择器:

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;
    };
})();

3

2

cgp 15 年前

您正在传入字符串值“row12”,但选择器应为:

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

指定您要查找的是ID。我同意我认为其他答案之一将要说的内容,您只应使用onclick事件的“natural”this关键字:

<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>