如何创建列表项并在使用递增和递减按钮时将其删除

Question

在我的页面上，我有一个额外硬件部分。我有图像，旁边是增量和减少增量按钮。现在，当您单击图像时，会出现一个列表项，当您单击该图像时，列表项将被删除。但是，我希望能够使用递增和递减按钮添加/更新和/或删除列表项。我只是不确定如何将代码放在一起这样做......

这是小提琴：http://jsfiddle.net/lolsen7/e2LSB/10/

这是html：

<div class="maincontent wraps">
    <div class="text-area">
        <div class="gethardware">
            <div id="station-builder-2">
                 <h3 class="margin-15 margin-top-30">Need Extra?</h3>

                <p>Click on the on the buttons(+/-) to add or subtract from your order.</p>
                <div class="numbers-row ipad">
                    <label for="name">Portable Terminals(iPad mini(s))</label>
                    <img id="ipad" class="part" src="http://placehold.it/100x100" alt="iPad_mini" />
                    <input type="text" name="portable-terminals" id="ipad_1" value="0" />
                </div>
                <div class="numbers-row mobile">
                    <label for="name">Wireless Receipt Printers</label>
                    <img id="mobilePrinter" class="part" src="http://placehold.it/100x100" alt="Mobile Printer" />
                    <input type="text" name="wireless" id="mobile_1" value="0" />
                </div>
                <!--<div class="numbers-row printer2">
                    <label for="name">Receipt Printers - For Food/Beverage Orders</label>
                    <img id="printer2" class="part" src="http://placehold.it/100x100" alt="Receipt Printer2" />
                    <input type="text" name="printer" id="printer_2" value="0" />
                </div>-->
                <ul id="list"></ul>
            </div>
            <!--end of gethardware-->
        </div>
        <!--end of text area-->
    </div>
    <!--end of main content-->

这是Javascript：

// JS for HARDWARE SECTION

$ // JS for HARDWARE SECTION

$(document).ready(function () {




    $(".part").mouseover(function () {
        if (this.className !== 'part selected') {
            $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100/ffffff');
        }
        $(this).mouseout(function () {
            if (this.className !== 'part selected') {
                $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
            }
        });
    });

    var list = document.getElementById("list");
    $(".part").click(function () {
        if (this.className == 'part') {
            $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100');
            console.log(this);
            //START OF THE EXTRA -- STATION 2
                    if (this.id == "ipad") {
                        li = document.createElement('li');
                        li.setAttribute('id', 'ipad_li');
                        li.appendChild(document.createTextNode('iPad mini (portable terminal'));
                        list.appendChild(li);
                    }
                    if (this.id == "mobilePrinter") {
                        li = document.createElement('li');
                        li.setAttribute('id', 'mobile_li');
                        li.appendChild(document.createTextNode('Mobile Printer'));
                        list.appendChild(li);
                    }
                    if (this.id == "printer2") {
                        li = document.createElement("li");
                        li.setAttribute("id", "printer2_li");
                        li.appendChild(document.createTextNode("Receipt Printer"));
                        list.appendChild(li);
                    }
        } else {
            $(this).attr('src', 'http://placehold.it/100x100' + this.id + 'http://placehold.it/100x100/ffffff');
            console.log(this);

            if (this.id == "ipad") {
                $('#ipad_li').remove();
            }
            if (this.id == "mobilePrinter") {
                $('#mobile_li').remove();
            }
            if (this.id == "printer2") {
                $("#printer2_li").remove();
            }

        }
        $(this).toggleClass('selected');
    });

// javascript按钮递增和递减

$(".numbers-row").append('<div class="inc buttons">+</div><div class="dec buttons">-</div>');
$(".buttons").on("click", function () {

    var $buttons = $(this);
    var oldValue = $buttons.parent().find("input").val();

    if ($buttons.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
        if (newVal > 2) {
            return;
        }

    } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $buttons.parent().find("input").val(newVal);

});

}）;