똑같은 함수를 호출해서 li를 삭제해보았는데 임의로 만든 삭제버튼은 작동하지만 옵션으로 만들어진 삭제버튼은 작동을 안하네요 ㅠㅠ

도와주실 수 있나요?


---------------------------------------------------------------

<!doctype html>

<html lang='ko'>

<head>

<title>옵션 select</title>

<meta charset='utf-8' />

<link rel='stylesheet' href='option.css' />

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</head>

<body >

<div id="container">

    <span>상품가격 : </span><span id="item-price">20,000원</span>

    <ul>

        <li>

            <select id="option-1" class="more-option" name="option-1">

                <option value="">색상선택</option>

                <option value="blue">blue</option>

                <option value="black">black</option>

                <option value="pink">pink</option>

            </select>

        </li>

        <li>

            <select id="option-11" name="option-11" disabled="disabled">

                <option value="">가로길이선택</option>

                <option value="200cm">200cm</option>

                <option value="300cm||+500">300cm(+500원)</option>

                <option value="400cm||+1000">400cm(+1,000원)</option>

            </select>

        </li>

        <li>

            <select id="option-12" name="option-12" disabled="disabled">

                <option value="">세로길이선택</option>

                <option value="200cm">200cm</option>

                <option value="300cm||+500">300cm(+500원)</option>

                <option value="400cm||+1000">400cm(+1,000원)</option>

            </select>

        </li>

        <li>

            <select id="option-13" class="nomore-option" name="option-13" disabled="disabled">

                <option value="">높이선택</option>

                <option value="200cm">200cm</option>

                <option value="300cm||+500">300cm(+500원)</option>

                <option value="400cm||+1000">400cm(+1,000원)</option>

            </select>

        </li>

    </ul>

    <ul id="selected-result">

    </ul>

    <div id="total-price">총 금액 : <span></span></div>

<ul><li><input type="button" class="del" value="삭제"></li>

    <li>aaaaaaaaaa</li>

    </ul>

    

</div>

<script type="text/javascript">

$(document).ready(function() {

    $('#container li select').change(function() {

        if(!$(this).hasClass('nomore-option')) {

            var val = $(this).val();

            var str = $(this).attr('id').split('-');

            var id = str[0] + '-' + str[1].substr(0, 1);

 

            var val = $(this).val();

            var idx = $('select[id^=' + id + ']').index($(this));

 

            if(val == '') {

                var $el = $('select[id^=' + id + ']:gt(' + idx + ')');

 

                $el.val('');

                $el.attr('disabled', true);

            } else {

                var $el = $('select[id^=' + id + ']:gt(' + idx + ')');

 

                $el.val('');

                $el.attr('disabled', true);

 

                $el.each(function() {

                    if($(this).is(':disabled')) {

                        $(this).attr('disabled', false);

                        return false;

                    }

                });

            }

        }

    });

 

    $('#container li select.nomore-option').change(function() {

        if($(this).hasClass('nomore-option')) {

            var str = $(this).attr('id').split("-");

            var id = str[0] + '-' + str[1].substr(0, 1);

            optionDisplay(id);

        }

    });

 

    // 상품개수증가

    $('span.add-item').on('click', function() {

        var $cntinput = $(this).closest('li').find('input');

        var count = parseInt($cntinput.val());

        count++;

 

        $cntinput.val(count);

 

        calculatePrice();

    });

 

    // 상품개수감소

    $('span.subtract-item').on('click', function() {

        var $cntinput = $(this).closest('li').find('input');

        var count = parseInt($cntinput.val());

        count--;

 

        if(count < 1) {

            alert('상품개수는 1이상 입력해 주십시오.');

            count = 1;

        }

 

        $cntinput.val(count);

 

        calculatePrice();

    });

  // 선택옵션삭제

$('.del').on('click', function() {

alert("실행됨");

        $(this).closest('li').remove();

        var resultcount = $('ul#selected-result li').size();

        if(resultcount < 1) {

            $('ul#selected-result').css('display', 'none');

            $('#total-price').css('display', 'none');

        }

 

        calculatePrice();

    });

    

});

function optionDisplay(id)

{

    var option = "";

    var sep = "";

    var optionval = "";

    var optionprc = "";

    var optionprice = "";

    var optionid = "";

    var optionadd = false;

 

    if($('ul#selected-result').is(':hidden')) {

        $('ul#selected-result').css('display', 'block');

        $('#total-price').css('display', 'block');

    }

 

    $('#container li select[id^=' + id + ']').each(function() {

        var str = $(this).val().split('||');

        optionval = str[0];

        if(str[1] == undefined) {

            optionprc = "0";

        } else {

            optionprc = str[1];

        }

        optionid = $(this).attr('id');

 

        if(optionval == '') {

            optionadd = true;

            return false;

        }

 

        option += sep + '<span class="selected-' + optionid + '">' + optionval + '</span>';

        optionprice += '<span class="price-value">' + optionprc + '</span>';

 

        sep = "/";

    });

 

    // 선택된 옵션체크

    $('ul#selected-result li span.selected-value').each(function() {

        var oldoption = $(this).html();

 

        if(oldoption == option) {

            alert('이미 선택된 옵션입니다.');

            optionadd = true;

            return false;

        }

    });

 

    if(!optionadd) {

        var resultcount = $('ul#selected-result li').size();

        var optioncontent = '<li><span class="selected-value">' + option + '</span><span class="option-price">' + optionprice + '</span><span class="item-count"> <input type="text" name="itemcount[]" value="1" /></span><span class="add-item"> + </span><span class="subtract-item"> - </span><input type="button" class="del" value="삭제"></li>';

 

        if(resultcount > 0) {

            $('ul#selected-result li:last').after(optioncontent);

        } else {

            $('ul#selected-result').html(optioncontent);

        }

 

        calculatePrice();

    }

}

 

function calculatePrice()

{

    var totalprice = 0;

    var itemprice = parseInt($('span#item-price').text().replace(/[^0-9]/g, ''));

 

    $('ul#selected-result li').each(function() {

        var $prcelmt = $(this).find('.price-value');

        var optprc = 0;

        var itcnt = parseInt($(this).find('input').val());

 

        $prcelmt.each(function() {

            var prc = parseInt($(this).text());

            optprc += prc;

        });

 

        totalprice += (itemprice + optprc) * itcnt;

    });

 

    $('#total-price span').text(number_format(totalprice) + '원');

}

 

function number_format(input){

    var input = String(input);

    var reg = /(-?d+)(d{3})($|.d+)/;

    if(reg.test(input)){

        return input.replace(reg, function(str, p1,p2,p3){

                return number_format(p1) + "," + p2 + "" + p3;

            }

        );

    }else{

        return input;

    }

}

</script>

</body>

</html>