怎样才能再次单击座位按钮时，取消所有的效果（颜色消失，选定的座位号也消失啊）

题目：制作一个电影院选定座位的页面。可以单击选择座位，再次单击可退选该座位，选定的座位在右侧列表中显示出来）。

怎样才能再次单击座位按钮时，取消所有的效果（颜色消失，选定的座位号也消失啊）


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{display:inline-block;float:left;}
            #div_3{margin-left:50px;}
            #div_2{color:red;text-align:center;font-size:20px;}
            input{border-radius:5px;}
        </style>
    </head>
    <body>
        <div id="div_l">
            <h2>电影院选座界面</h2>
            <script>
            for(var j=1;j<9;j++)
                {
                    for(var i=1;i<9;i++)
                {
                    document.write("<input id='items' type='button' onclick='click_1()' value="+j+'-'+i+">"+ "&nbsp;&nbsp;");
                }
                document.write("<br><br>");
            }
            function click_1()
            {
                event.srcElement.style.backgroundColor="pink";
                var div = document.getElementById("div_2");
                var str="第"+event.srcElement.value.charAt(0)+"排的第"+event.srcElement.value.charAt(2)+"号座位"+"<br>";
                div.innerHTML+=str;
            }
        </script>
        </div>
        
        <div id="div_3">
            <h2>已经被选定的座位</h2>
            <p id="div_2"></p>
        </div>
        
    </body>
</html>

img