使用變量使用jQuery添加和刪除表單輸入字段

Question

我試圖在單擊帶有class =“ checkbox”的跨度時向表單添加一個隱藏的輸入字段，並在單擊帶有對勾標記的跨度時刪除同一字段。

我可以添加輸入，但是不能刪除它 。

我的HTML：

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

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

我的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();




        }
    });
});

Answer 1

我猜您必須將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();
        }
    });
});

Answer 2

您可能通過該id標記擁有多個DOM元素，因此可能正在刪除與該id匹配但不匹配的元素。

嘗試改為給它一個類名，並通過添加父元素（例如，

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