Javascript 使用变量在jQuery中添加和删除表单输入字段

我试图在单击带有class=“checkbox”的span时向表单添加一个隐藏的输入字段，并在单击带有选中标记的span时删除该字段

我可以添加输入，但无法删除它

我的HTML：

<span title="Here's My Title" class="wishlistcheck checkbox">1</span>

<form id="wishlistform"></form>

1

我的Javascript：

$(document).ready(function() {

    var appNum = 0;

    $("span.wishlistcheck").click(function() {
        var el = $(this);
        var appName = el.attr("title");

        var isChecked = el.hasClass('checkmark');
        if(!isChecked) {
            el.removeClass('checkbox');
            el.addClass('checkmark');

            appNum++

            $("#wishlistform").append("<input id=\"" + appName + "\" type=\"hidden\" name=\"product_" + appNum + "\" value=\"" + appName + "\">");


        } else {
            el.removeClass('checkmark');
            el.addClass('checkbox');

            appNum--

            $("input#" + appName).remove();




        }
    });
});

$（文档）.ready（函数（）{
var-appNum=0；
$（“span.wishlistcheck”）。单击（函数（）{
var el=$（本）；
var appName=el.attr（“标题”）；
var isChecked=el.hasClass（'checkmark'）；
如果（！已检查）{
el.removeClass（“复选框”）；
el.addClass（“复选标记”）；
阿普努姆++
$（“#愿望列表”）。附加（“”）；
}否则{
el.removeClass（“复选标记”）；
el.addClass（“复选框”）；
阿普努姆--
$（“输入#“+appName）.remove（）；
}
});
});

我想您必须将

appNum--

放在.remove（）方法调用之后。试试看：

$(document).ready(function() {
    var appNum = 0;
    $("span.wishlistcheck").click(function() {
        var el = $(this);
        var appName = el.attr("title");
        var isChecked = el.hasClass('checkmark');
        if(!isChecked) {
            el.removeClass('checkbox');
            el.addClass('checkmark');
            appNum++
            $("#wishlistform").append("<input class=\"" + appName + "\" type=\"hidden\" name=\"product_" + appNum + "\" value=\"" + appName + "\">");
        } else {
            el.removeClass('checkmark');
            el.addClass('checkbox');
            appNum--
            $("input[class=" + appName + "]").remove();
        }
    });
});

$（文档）.ready（函数（）{
var-appNum=0；
$（“span.wishlistcheck”）。单击（函数（）{
var el=$（本）；
var appName=el.attr（“标题”）；
var isChecked=el.hasClass（'checkmark'）；
如果（！已检查）{
el.removeClass（“复选框”）；
el.addClass（“复选标记”）；
阿普努姆++
$（“#愿望列表”）。附加（“”）；
}否则{
el.removeClass（“复选标记”）；
el.addClass（“复选框”）；
阿普努姆--
$（“输入[class=“+appName+”]）。删除（）；
}
});
});

我想您必须将

appNum--

放在.remove（）方法调用之后。试试看：

$(document).ready(function() {
    var appNum = 0;
    $("span.wishlistcheck").click(function() {
        var el = $(this);
        var appName = el.attr("title");
        var isChecked = el.hasClass('checkmark');
        if(!isChecked) {
            el.removeClass('checkbox');
            el.addClass('checkmark');
            appNum++
            $("#wishlistform").append("<input class=\"" + appName + "\" type=\"hidden\" name=\"product_" + appNum + "\" value=\"" + appName + "\">");
        } else {
            el.removeClass('checkmark');
            el.addClass('checkbox');
            appNum--
            $("input[class=" + appName + "]").remove();
        }
    });
});

$（文档）.ready（函数（）{
var-appNum=0；
$（“span.wishlistcheck”）。单击（函数（）{
var el=$（本）；
var appName=el.attr（“标题”）；
var isChecked=el.hasClass（'checkmark'）；
如果（！已检查）{
el.removeClass（“复选框”）；
el.addClass（“复选标记”）；
阿普努姆++
$（“#愿望列表”）。附加（“”）；
}否则{
el.removeClass（“复选标记”）；
el.addClass（“复选框”）；
阿普努姆--
$（“输入[class=“+appName+”]）。删除（）；
}
});
});

该id标记可能包含多个DOM元素，因此它可能会删除与该id匹配但不正确的元素

试着给它起一个类名，并通过添加父元素（例如

 $('#wishlistform input#' + appName).remove();

---

该id标记可能有多个DOM元素，因此它可能会删除与该id匹配但不正确的元素

试着给它起一个类名，并通过添加父元素（例如

 $('#wishlistform input#' + appName).remove();

---

您知道

appNum++

和

appNum--

是语句，它们后面需要一个分号，对吗？您知道

appNum++

和

appNum--

是语句，它们后面需要一个分号，对吗？您说给它一个类名，但是您仍然在选择器中使用

#

而不是

？我也尝试过（使用父表单id，即使它是页面上唯一具有该id的元素）。确实，我不知道他会指定什么类名：你说给它一个类名，但是你仍然在选择器中使用

#

而不是

？我也尝试过（使用父表单id，尽管它是页面上唯一具有该id的元素）。的确，我不知道他会指定什么类名：pSo尝试使用相同的代码，但按它的类选择它（正如rposky所说），而不是按它的idPerfect！它也是这样工作的$（“输入[id=“+appName+”]）。删除（）；因此，尝试使用相同的代码，但选择它的类（如rposky所说），而不是它的idPerfect！它也是这样工作的$（“输入[id=“+appName+”]）。删除（）；