如何使用删除图标在输出 div 中显示子类别复选框标签并在取消选中时将其删除，反之亦然

Question

我有一个带有子类别的类别列表。用户只能从一个类别中选择一个子类别。我想在具有删除图标的输出 div 中显示选定的子类别，单击删除时应将其从输出列表中删除，并取消选中相同的子类别.....

<div class="category-output">

   <ul>

   </ul>

</div>

<ul class="main-category-check">

     <li>

          <p>

              <label>

                  <input type="checkbox" class="filled-in categoryCheck"

                                                                name="season2" />

                                                            <span>Category 1</span>

                 </label>

        </p>

     <ul class="sub-category-check">

            <li>

                 <p>

                     <label>

                                                                    <input type="checkbox" class="filled-in"

                                                                        name="season2" />

                                                                    <span>Sub Category 1</span>

                                                                </label>

                                                            </p>

                                                        </li>

                                                        <li>

                                                            <p>

                                                                <label>

                                                                    <input type="checkbox" class="filled-in"

                                                                        name="season2" />

                                                                    <span>Sub Category 2</span>

                                                                </label>

                                                            </p>

                                                        </li>