[jQuery]선택한 리스트 삭제

 

$("#remove").click(function(){
    remove();
})

function remove(){
    if($clickItem){
        $clickItem.remove();
        $clickItem=null;
    }else{
        alert("삭제할 이름을 선택하세요");
    }
}

 

 

전체 소스

 

<script>
    var $member=null;
    var $memberName=null;
    var $clickItem=null;
    $(document).ready(function(){
        init();
        initEvent();
    })

    function init(){
        $member=$(".member");
        $memberName=$("#memberName");
    }

    function initEvent(){
        $("#add").click(function(){
            add();
        })
        $("#modify").click(function(){
            modify();
        })
        $("#remove").click(function(){ //삭제 버튼 클릭 시 remove 함수 실행
            remove();
        })
        $member.on("click","li",function(){
            addClass($(this));
        })
    }

    function addClass($item){
        if($clickItem!=null){
            $clickItem.removeClass("on");
        }
        $clickItem=$item;
        $clickItem.addClass("on");
    }


    function add(){
        memberName = $memberName.val();
        if($clickItem){
            $clickItem.after(`<li>${memberName}</li>`);
        }else{
            $member.append(`<li>${memberName}</li>`);
        }
    }

    function modify(){
        memberName = $memberName.val();
        if($clickItem){
            $clickItem.text(memberName);
        }else{
            alert("수정할 이름을 선택하세요");
        }
    }
    
    function remove(){ //삭제 함수
        if($clickItem){
            $clickItem.remove();
            $clickItem=null;
        }else{
            alert("삭제할 이름을 선택하세요");
        }
    }


</script>

<div>
    <input type="text" id="memberName" />
    <button id="add">
        추가
    </button>
    <button id="modify">
        수정
    </button>
    <button id="remove">
        삭제
    </button>
</div>
<ul class="member">
</ul>