jqueryを使用してクリックしてどこからでもidを追加して削除する方法

Question

jqueryを使用してクリックを追加してクリックしてIDの削除を試みています。

ここでは1つの質問があります。

私の機能を追加してもうまくいきますが、ユーザが.clickボタンを押さずにクリックした場合でも、idは.add divクラスから削除する必要があります。

私はこれを作成しましたDEMO codepen.ioから作成しました。どうすればいいですか、誰でもここで私を助けることができますか？それとも、他の方法がありますか？

ありがとうございます。あなたは緑色のボックスの外側をクリックしたときに

<div class="container"> 
    <div class="click" data-id="1">Click HERE</div> 

    <div class="add">Check</div> 
</div> 

JS

$(document).ready(function() { 
    $("body").on("click", ".click", function() { 
     var ID = $(this).attr("data-id"); 
     $(".add").attr('id', ID); 
     // When you click anywhere i want to remove added 
     // $(".add").attr('id', ID); 
     // Like this $(".add").attr('id', ''); 
    }); 
}); 

Answer 1

これを試してみてください、それは、私の解決策を試してみてください.addクラス

$(document).ready(function() { 
 
    $("body").on("click", ".click", function() { 
 
     var ID = $(this).attr("data-id"); 
 
     $(".add").attr('id', ID); 
 
     // When you click anywhere i want to remove added 
 
     // $(".add").attr('id', ID); 
 
     // Like this $(".add").attr('id', ''); 
 
    }); 
 
}); 
 

 
$(document).mouseup(function (e) 
 
{ 
 
    var container = $(".container"); 
 

 
    if (!container.is(e.target) // if the target of the click isn't the container... 
 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
 
    { 
 
     $(".add").attr('id', ''); 
 
    } 
 
});

.container { 
 
    position:relative; 
 
    width:100%; 
 
    max-width:300px; 
 
    margin:0px auto; 
 
    padding:25px; 
 
    background:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="click" data-id="1">Click HERE</div> 
 
    
 
    <div class="add">Check</div> 
 
</div>