どのように適切に異なるスタイルを持つ別のdivにチェックインの属性を表示するには？

マーク：

私はjQueryのに非常に新しいです。コードの最初の部分は、入力をチェックすることで、確認された後、それがフォーマット下のチェックされた項目が表示されるはずです。どのようにjqueryのの助けを借りてこれを行うことができます。

<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

後に、このフォーマットで、それがなければならないディスプレイにチェック。

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul class="approval approval_scrolltab mt-3">
    <li>
      <div class="approval--member">
        <img src="assets/images/user.jpg" class="user--image" />
        <div class="w-100">
          <h6 class="approval--name">Name</h6>
          <p>Initiator</p>
        </div>
        <a href="">
          <span class="ic-close"></span>
        </a>

      </div>
    </li>
  </ul>
</div>

私はthis.Itは、名前の罰金を働いていたようにしようとしたが、名前を付け、このユーザ画像を表示し、あまりにもname.I近くアイコンはこれだけのコードで名前を表示することができるというのですキャンセルがあることができますどのようにないアイデアを持っていません。

<script>
  $('input[type="checkbox"]').on('change', function () {
    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');

    if ($(this).prop('checked')) {
      $('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
      $('#checked-images').append("<img src='image'")
    } else {
      $('#checked-names p[data-name="' + name + '"]').remove();
      $('#checked-images').remove()
    }
  });
</script>

UPDATE この閉じるボタンでは、私は、入力で確認してからこれをオフにするだけでなく、（素晴らしい作品）をチェックリストからこれを削除します。

 $('body').on('click', '.ic-close', function() {
    $(this).closest('li').remove()
    $(this).closest('li').prop('checked',false) #didn't worked
  });

ロビンGillitzer：

以下このスクリプトは、あなたのための役に立つかもしれません。私は唯一の追加ID、ユーザーのリストに、削除a、あなたに閉じるボタンからタグをHTML。JavaScript追加HTMLあなたが希望nameしてimageリストに追加します。あなたがクリックした場合closeのスパンを、項目が削除されます。

UPDATE： そのユーザー・リスト項目を閉じることで、チェックボックスをオフにするには、次のような属性を追加する必要がありdata-name="Initiator"、チェックボックスにします。でJavaScriptに2行を追加した場合click listenerのic-close item、以下を参照してください。

$('input[type="checkbox"]').on('change', function() {
  var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
  var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();

  if($(this).prop('checked')) {

    $('ul#user-list').append(
    '<li id="' + name + '">' +
      '<div class="approval--member">' +
        '<img src="' + image_url + '" class="user--image" />' +
        '<div class="w-100">' +
          '<h6 class="approval--name">Name</h6>' +
          '<p>' + name + '</p>' +
        '</div>' +
        '<span class="ic-close">Close</span>' +
      '</div>' +
    '</li>');

  } else {
    $('ul#user-list #' + name).remove();
  }

  $('body').on('click', '.ic-close', function() {
    var name = $(this).closest('li').find('.approval--name ~ p' ).text();
    $('input[data-name="' + name + '"]').prop( "checked", false );

    $(this).closest('li').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
  <li>
    <div class="approval--member">
      <img src="assets/images/user.jpg" class="user--image" />
      <div class="w-100">
        <h6 class="approval--name">Name</h6>
        <p>Initiator</p>
      </div>
      <div class="form-group">
        <div class="checkbox">
          <input data-name="Initiator" name="one" type="checkbox" id="one" />
          <label for="one"></label>
        </div>
      </div>

    </div>
  </li>
</ul>

<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
  <h6 class="heading--form mb-2 mt-3 mt-sm-0">
    User
  </h6>
  <ul id="user-list" class="approval approval_scrolltab mt-3">
  </ul>
</div>