Leaflet チェックが消えた時に、マーカーの削除をしたい

前提・実現したいこと

Leaflet チェックボックスの判定をしてマーカーの削除をしたい。

現在のコードとして、チェックボックスを入れると、県にピンが立つような感じです。

クリックする度に、ピンが立つので影がついていってしまいます。

東京がONになったら、東京にピンが立って、OFFになったらピンが消えるような感じにしたいのですが、どう書いていけば分かっていないです。。

解決策が分かる方、教えて頂きたいです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
7  <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
8</head>
9
10<body onload="init()">
11  <div id="mapcontainer" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
12  <div class="main" style="position: absolute; z-index:500; background-color: white; height: 200px;">
13    <h2>都道府県</h2>
14    <ul>
15      <li>
16        <div>
17          <input type="checkbox" onclick="tokyo()">東京
18        </div>
19      </li>
20      <li>
21        <div>
22          <input type="checkbox" onclick="kanagawa()">神奈川
23        </div>
24      </li>
25      <li>
26        <div>
27          <input type="checkbox" onclick="chiba()">千葉
28        </div>
29      </li>
30    </ul>
31  </div>
32
33  <script>
34    //地図を表示するdiv要素のidを設定
35    var map = L.map('mapcontainer', {
36      zoomControl: false
37    });
38
39
40    // オープンストリートマップ
41    var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
42      attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
43    });
44
45    function init() {
46      osm.addTo(map);
47      var mpoint = [35.681236, 139.767125];
48      map.setView(mpoint, 10);
49    }
50
51    function tokyo() {
52      L.marker([35.658182, 139.702043]).bindPopup("東京").addTo(map);
53    }
54
55    function kanagawa() {
56      L.marker([35.491354, 139.284143]).bindPopup("神奈川").addTo(map);
57    }
58
59    function chiba() {
60      L.marker([35.335416, 140.183252]).bindPopup("千葉").addTo(map);
61    }
62  </script>
63</body>
64</html>
65