Wie kann ich den genauen Absatz kennen, in dem der Löschschlüssel nicht gedrückt war?

Question

Sagen wir, wir haben ein HTML wie unten.

<div class="my_content" contenteditable="true"> 
    <div class="my_paragraph"><span style="color:red;">RED</span><span style="color:green;">GREEN</span></div> 
    <div class="my_paragraph"><span style="font-size:1em">1EM-TEXT</span><div> 
    <div class="my_paragraph"><span style="font-size:2em">2EM-TEXT</span><div> 
</div> 

Und ich habe einen Backbone-Viewer wie unten.

events: { 
    "keydown .my_paragraph" :"onKeyDown" 
}, 

onKeyDown : function(e) { 
    if(e.keyCode === 46) { //delete key 
    } 
} 

Q. In dem ‚if‘ an der onKeyDown Methode: Wie kann ich den genauen-Absatz erhalte die Benutzer (durch drücken Löschtaste) zu löschen, ist versuchen?

Answer 1

onKeyDown : function(e) { 
    if(e.keyCode === 46) { //delete key 
    } 
} 

Sie erwarten, dass ein Ereignis in Ihrem Beispiel übergeben werden, die die param ist e Sie identifizieren können, welche Absatz konzentrieren wird mit e.target Objekt

Update:

---

Als das, was haben Derek gesagt, Divs können nicht auf Tastendruckereignis zuhören, es sei denn, Sie setzen Inhalt editierbar auf wahr.

Dazu die contenteditable von Eltern div und setzen Sie diese Eigenschaft in jedem des Kind

$(function(){ 
 
    $('.my_paragraph').on('keydown', function(e){ 
 
     console.log(e.target); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="my_content"> 
 
    <div class="my_paragraph first" contenteditable="true"><span style="color:red;">RED</span>"><span style="color:green;">GREEN</span></div> 
 
    <div class="my_paragraph second" contenteditable="true"><span style="font-size:1em">1EM-TEXT</span></div> 
 
    <div class="my_paragraph third" contenteditable="true"><span style="font-size:2em">2EM-TEXT</span></div> 
 
</div>

Answer 2

Sie könnten etwas tun, nach dem Vorbild der Arbeit, entfernen:

var cursorTarget = getSelection().getRangeAt(0).commonAncestorContainer.parentNode; 
var targetParagraph = $('.my_paragraph').has(cursorTarget); 
targetParagraph.addClass('target-paragraph'); // Or whatever you want 

Codepen Example (Verwenden Sie zum Beispiel die Leertaste)

---

Auch wichtig: Sie haben ungültiges HTML. Sie verwenden in den letzten zwei .my_paragraph divs nicht korrekt schließende </div> Tags und es gibt ein extra "> nach dem Schließen des ersten span.