当父元素是contentEditable时,是否可以防止删除子元素？

Question

元素为时contentEditable,可以删除其子元素.如果其中一个子元素不是 contentEditable,则无法编辑子项的内容,但仍可删除元素本身.您可以在以下示例中看到此演示.

是否可以防止删除这些子元素？

div {
  height: 100px;
  border: 1px solid #CCC;
  margin: 5px;
  padding: 5px;
  width: 300px;
}

span {
  color: #999;
}

<div contentEditable="true">Hello <span contentEditable="false">world</span>!</div>

Answer 1

如果你可以使用类，那就很容易了。

<div class="contentEditable">Hello <span class="contentNotEditable">world</span>!</div>
<div class="saveContent" style="display: none;"></div>

JavaScript/Jquery 部分

<script>
$(".contentEditable").on("click",function(){
 // make blank .saveContent
 $(".saveContent").html("");

 // copy all contentNotEditable class which inside selected contentEditable class.
 $( this ).find(".contentNotEditable").clone().appendTo( ".saveContent" );

 // make blank contentEditable
 $( this ).html("");

 // clone contentNotEditable to contentEditable
 $( ".saveContent" ).find(".contentNotEditable").clone().appendTo( ".contentEditable" );
});
</script>