ユーザ挿入されたデータ属性に基づいて、<ins>タグから選択されたテキストを削除

Question

I有し以下次のHTMLコード： - バルク削除の場合

<p class="newPara" id="1_0_1"> 
    <ins data-inserted="1">The ability of </ins><ins data-inserted="2">computers to follow</ins> <ins data-inserted="2">a sequence of operations</ins><ins data-inserted="1">, called a program, </ins><ins data-inserted="2">make computers very flexible and useful.</ins> 
</p> 
<p class="newPara" id="1_0_2"> 
    <ins data-inserted="1">Peripheral devices</ins> <ins data-inserted="2">include input devices </ins><ins data-inserted="1">(keyboards, mice, joystick, etc.),</ins> <ins data-inserted="2">output devices (monitor screens, printers, etc.),</ins><ins data-inserted="1"> and input/output devices that perform both functions.</ins> 
</p> 

特定のユーザによって入力されたテキストを削除する必要があり、他のユーザーが入力した残りのテキストは、ストライクスルーモードに変更する必要があり、消えることはありません（delタグへのinsタグ）。これは複数のフラグメントが選択されている場合にも必要です。

これは、バックスペース、削除、選択削除、バックスペースの選択などのすべての使用例で処理する必要があります。

私の予想結果は次のとおりです。 - ユーザーID 1が両方の段落 と押してキーを削除選択されている場合、私は次の出力

<p class="newPara" id="1_0_1"> 
    <ins data-inserted="1">The ability of </ins><del data-deleted="1" data-inserted="2">computers to follow</del> <del data-deleted="1" data-inserted="2">a sequence of operations</del><ins data-inserted="1">, called a program, </ins><del data-deleted="1" data-inserted="2">make computers very flexible and useful.</del> 
</p> 
<p class="newPara" id="1_0_2"> 
    <ins data-inserted="1">Peripheral devices</ins> <del data-deleted="1" data-inserted="2">include input devices </del><ins data-inserted="1">(keyboards, mice, joystick, etc.),</ins> <del data-deleted="1" data-inserted="2">output devices (monitor screens, printers, etc.),</del><ins data-inserted="1"> and input/output devices that perform both functions.</ins> 
</p> 

を必要とする私は、次のコードを試してみました1つのnewParaクラスのユーザー変更を追跡するには、次のコードからうまく動作します。

var sel = window.getSelection(); 
var $parent = $(sel.getRangeAt(0).commonAncestorContainer); 
var $clone = $("<div/>").append(sel.getRangeAt(0).cloneContents()); 
var str = $clone.html(); 
sel.deleteFromDocument();  
var span = document.createElement("div"); 
$(span).addClass('tempSelectedDiv'); 
span.innerHTML = str; 
sel.getRangeAt(0).insertNode(span); 

$.each($('.tempSelectedDiv').contents(), function(i, val) { 
    if(val.nodeName == 'INS' && val.getAttribute('data-ins-author') == abapp.userId){ 
     val.remove(); 
    }else{ 
     $(val).replaceWith('<del data-ins-author="'+insAuth+'" >' + $(val).text() +'</del>'); 
    } 
}); 

しかし

はjsfiddleで実施例を更新javascriptの選択に基づいて、複数のnewParaクラスのためにこのコードを達成するために私を助けては、その単一newParaクラスのために働いて、同じプリンシパルが複数のパラ（複数newPara）全体に従うべき

リンク： - https://jsfiddle.net/ww81sbcs/

Answer 1

いつも新しいdivを作成する代わりに、インラインを置き換えるのはどうですか？ fiddleとコード：

$(document).ready(function(){ 
    $('#deleteKey').click(function(){ 
    debugger; 
    var sel = window.getSelection(); 
    var $cont = $(sel.getRangeAt(0).commonAncestorContainer); 

    $cont.find('ins').each(function(idx) { 
     if (this.getAttribute('data-inserted') == 1) { 
      $(this).replaceWith(function(){ 
       return $("<del data-inserted='"+1+"' />").append($(this).contents()); 
      }); 
     } 
    }); 

    }); 
}); 

説明：

• var $cont...：あなたのコードのように、選択した範囲
の共通の親要素を見つける
• $cont.find('ins').each(function(idx)：このコンテナとプロセスのすべての要素を持つ検索insタグ
• ロジック： "ours"（私たちはユーザー1であると仮定します）であれば、それを打ち切ります。私たちがそれに触れないと...

私はあなたが期待する結果を与えると思います。質問に投稿した出力を正確に取得したい場合は、ユーザIDを1の代わりに2に置き換えてください。

Answer 2

これを試してください。選択した領域の子要素のすべての子要素を繰り返し処理：私はここで行われている

変更が です。

2：ボタン要素の前に動的に作成されたdivを挿入します。

$(document).ready(function() { 
    $('#deleteKey').click(function() { 
    var sel = window.getSelection(); 
    var $parent = $(sel.getRangeAt(0).commonAncestorContainer); 
    var $clone = $("<div/>").append(sel.getRangeAt(0).cloneContents()); 
    var str = $clone.html(); 
    sel.deleteFromDocument(); 
    var span = document.createElement("div"); 
    $(span).addClass('tempSelectedDiv'); 
    span.innerHTML = str; 

    $(span).insertBefore($(this)); 

    $('.tempSelectedDiv').children().each(function(i, val) { 
     $(val).children().each(function(i, val) { 
     if (val.nodeName == 'INS' && val.getAttribute('data-inserted') == 1) { 
      $(val).html(); 
     } else { 
      $(val).replaceWith('<del data-inserted="' + 1 + '" >' + $(val).text() + '</del>'); 
     } 
     }); 
    }); 

    $('.tempSelectedDiv').contents().unwrap(); 
    $('.tempSelectedDiv').remove(); 
    }); 

    $('.tempSelectedDiv').contents().unwrap(); 
    $('.tempSelectedDiv').remove(); 
}); 

フィドル：https://jsfiddle.net/1qu5c5cf/