キーでdivを削除するには？

Question

divをクリックしてDeleteのキーを押したときに発生したHTMLのdivを削除したいと思いますが、jQueryスクリプトを使用していますが動作しません。

$('div').click(function() { 
 
    if ($('html').keyup().keyCode == 46) { 
 
    var id_div = $(this).attr('id'); 
 
    var element = document.getElementById(id_div); 
 
    if (document.getElementById(id_div).className = "mystyle") { 
 
     element.parentNode.removeChild(element); 
 
    } 
 
    } 
 
})

<div id="div1"> 
 
    <div id="div4" class="mystyle"></div> 
 
</div> 
 

 
<div id="div2" class="mystyle"> 
 
</div> 
 

 
<div id="div3"> 
 
    <div id="div5" class="mystyle"></div> 
 
</div>

Answer 1

第一：あなたはjqueryの

第二を含める必要があります：あなたは、クリック

第三後のdivにクラスを追加する必要があります：あなたは、ドキュメントkeyUpイベント

が必要になります

$(document).ready(function(e){ 
 
    // div click 
 
    $('div.mystyle').on('click',function(){ 
 
    // delete previous ToDelete classes from the divs 
 
    $('div.mystyle').not($(this)).removeClass('ToDelete'); 
 
    // append new class `ToDelete` to the div 
 
    $(this).addClass('ToDelete'); 
 
    }); 
 
    
 
    // document keyup 
 
    $(document).on('keyup',function(e){ 
 
    // if key is Delete 
 
    if(e.which == 46){ 
 
     // remove the same div you clicked on 
 
     $('div.ToDelete').remove(); 
 
     
 
     // to remove the parent 
 
     //$('div.ToDelete').parent().remove(); 
 
    } 
 
    }); 
 
})

.mystyle{ 
 
    height : 100px; 
 
    border : 3px solid #000; 
 
    margin : 20px; 
 
} 
 
.mystyle.ToDelete{ 
 
    border : 3px solid #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <div id="div4" class="mystyle"></div> 
 
</div> 
 

 
<div id="div2" class="mystyle"> 
 
</div> 
 

 
<div id="div3"> 
 
    <div id="div5" class="mystyle"></div> 
 
</div>

注：上記のコードは、あなたがクリックした同じdiv要素を削除します。.. （たとえばid div5でのdivをクリックし 場合、それはdiv5を削除します）あなたは親を削除する が必要な場合DIVあなたが $('div.ToDelete').parent().remove();代わりの $('div.ToDelete').remove();

Answer 2

あなたのコード、それはあなたであるために動作していない、いくつかの問題を持っているを使用する必要がありますコード、あなたがクリックイベントメソッドの後に置いたものは一度だけ実行されますが、あなたのキーアップイベントを待つことはありません！

が続く例を使用します。

HTML：

<div id="div1"> 
    <div id="div4" class="mystyle">First Div (Click me and press delete) 
    </div> 
</div> 

<div id="div2" class="mystyle">Second Div (Click me and press delete) 
</div> 

<div id="div3"> 
    <div id="div5" class="mystyle">Third Div (Click me and press delete) 
    </div> 
</div> 

のjQuery：

$(document).ready(function(e){ 
    $("div").on("click",function(){ 
    $(this).addClass("DeletMe"); 
    }); 

$(document).on("keyup",function(e){ 
    if(e.which == 46){ 
     $("div.DeletMe").remove(); 
    } 
}); 
}) 

https://jsfiddle.net/vffp6k4j/