Remove the selected text from the <ins> tag based on a user-entered data attribute

Question

I have the following 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>

In the case of mass deletion, when the text entered by a specific user must be deleted, the remaining text entered by another user must be changed in order to switch to scroll mode and not disappear (ins tag to del tag). This should matter if multiple fragments are selected.

This must be handled in all cases of use, such as backspace, delete, select delete, select backspace.

My expected result: - if user identifier 1 is selected as a paragraph and press the "Delete" key, I need the following output

<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>

, 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>');
    }
});

newPara javascript

jsfiddle, newPara, , ( newPara)

: - https://jsfiddle.net/ww81sbcs/

Answer 1

inline 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
• : "" ( , 1), . , ...

, , . , , 2 1.

Answer 2

.

, ,

1: .

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/