Using variable to add and remove a form input field with jQuery

Question

I am trying to add a hidden input field to a form when a span with class="checkbox" is clicked, and remove that same field when span with checkmark is clicked.

I am able to add the input, but I cannot remove it.

My HTML:

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

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

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




        }
    });
});

you are aware that appNum++ and appNum-- are statements, and need a semicolon after them right? — gcochard
– gcochard, Commented May 7, 2012 at 23:05

Danilo Valente · Accepted Answer · 2012-05-07 23:15:25Z

2

I guess you have to put the appNum-- after the .remove() method calling. Try it:

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

edited May 7, 2012 at 23:15

answered May 7, 2012 at 23:07

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Danilo Valente Over a year ago

So try using the same code, but selecting it by it's class (as rposky said), an not by it's id

nitsuj Over a year ago

Perfect! It works like this too... $("input[id=" + appName + "]").remove();

rposky · Accepted Answer · 2012-05-07 23:09:49Z

2

You probably have multiple DOM elements by that id tag, and so it may be removing an element matching that id but not the right one.

Try giving it a class name instead and getting more specific in your jQuery parameters by adding parent elements, i.e.

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

answered May 7, 2012 at 23:09

rposky

2,2663 gold badges19 silver badges22 bronze badges

3 Comments

Simon Forsberg Over a year ago

You say to give it a class name instead, and yet you still use # instead of . in the selector ?

nitsuj Over a year ago

I tried that too (using the parent form id, even though it is the only element on the page with that id). It didn't work.

rposky Over a year ago

True, I didn't know what class name he would assign though :p

Collectives™ on Stack Overflow

Using variable to add and remove a form input field with jQuery

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related