li를 remove 시키질 못합니다

유지니아 2016.06.30 13:02 Views : 8398

똑같은 함수를 호출해서 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>

I want to
cmd_document_vote_user List
No. Subject Author Date Views
Notice SQL강좌: 챗GPT와 함께 배우는 SQL Server 무료 강좌 목차와 소개 (2023년 9월 업데이트) 코난(김대우) 2023.08.18 33870
Notice Python 무료 강좌 - 기초, 중급, 머신러닝(2023년 6월 업데이트) 코난(김대우) 2021.01.01 17084
33 prevUnitl 범위에대한 질문 초보코딩초보 2020.11.12 185
32 jquery 자동 슬라이드 가르쳐 주십시요!! 이제배워보자 2020.06.10 750
31 브라우저 control+F 기능이 정상적으로 작동하지 않습니다. Han이 2018.12.27 2024
30 자바스크립트 질문 입니다 답변 부탁드립니다 ㅠㅠ 시간을건다 2017.04.21 5842
29 닫기버튼 도와주세요/`` [2] lizliz 2017.02.05 7032
28 jquery dialog사용법 질문드립니다. CHAVO 2016.08.26 8583
» li를 remove 시키질 못합니다 [1] 유지니아 2016.06.30 8398
26 혹시 이것 아시는분 있나요 [1] 니징구 2015.05.11 13701
25 check가 됬다 안됬다 하는 이유는 뭘까요? 미치겠슴 ㅜㅜ [1] 무념 2014.07.07 13213
24 DropDown 메뉴에서 해당 페이지의 메뉴 이미지 상태 유지 문의 Larry 2013.11.18 13472
23 테이블 자동완성 [1] hururuzz 2013.07.31 16623
22 웹폼에서 자바스크립트 매개변수 보내기 질문입니다. [3] 한바위 2013.07.08 17098
21 jquery 애니메이션 질문 Stream_Pirs 2013.07.02 15873
20 결재메뉴의 조직도처럼 오른쪽 트리에서 선택한 값을 왼쪽트리로 이동하는????? 아더왕 2013.05.15 18503
19 질문드립니다. 하우ㅇ 2013.05.11 13979
18 jQuery 등으로 연간계획표를 만들 수 있을까요? [1] taz2315 2013.04.02 16822
17 뜬금없지만VBscript 관련 질문입니다.!부디 도와주소서 ㅠㅠ [1] 풀내기vber 2012.06.21 14158
16 plugin 안의 function을 어떻게 접근해야 하나요? [1] yahao 2012.05.24 10475
15 JSON.parse() json2.js 질문드립니다. [3] 자유인s 2012.05.18 15965
14 검색후 선택유지되게 할수 없을까요? [1] 오리지널 2012.04.29 16904
Write Tag


XE Login