如何删除整个span元素与内容可编辑跨度内？ [英] How to delete whole span element with contenteditable spans inside it?

问题描述

我有一个contenteditable div 。在里面，我把一个'分数'跨度，关于此链接。这是我当前的代码（跨度中的数字只是虚拟数字）：

 < span style =display：inline- block; vertical-align：middle; contenteditable =false> 
< span style =display：block; min-width：20px; border-bottom：1px solid black; text-align：center; outline：none; contenteditable> 6< / span> 
< span style =display：block; min-width：20px; text-align：center; outline：none; contenteditable> 7< / span> 
< / span> 
  

我的问题是，当我试图删除这个'fraction'跨度应该是可删除的，因为这是一个数学WYSIWYG程序），它只是删除两个内部contenteditable跨度的内容。当我尝试删除它（显然是从外部跨度，但在contenteditable div内），我想要删除所有三个元素。

更新：

任何解决方案？ / strong>如果没有办法做到这一点，有一种方法来选择整个span元素及其内容，当用户按下大分数跨度旁边的删除键？

解决方案

只需在顶部提供一个ID：

 < span id =editfraction
 style =display：inline-block; vertical-align：middle; 
 contenteditable =false> 
  

并使用此操作将其删除：

  $（'＃editfraction'）。remove（）; 
  

如果要在用户按删除按钮时删除span，请使用ids，

 < span ... data-ondeleteId =＃editxcontenteditable> 6< span> 
  

请参阅 this jsfiddle 例如

I have a contenteditable div. Inside, I have put a 'fraction' span, with regards to this link. Here's my current code (the numbers in the spans are just dummy numbers):

<span style="display:inline-block; vertical-align:middle;" contenteditable="false">
  <span style="display:block; min-width: 20px;border-bottom:1px solid black; text-align: center; outline: none;" contenteditable>6</span>
  <span style="display:block; min-width: 20px;text-align: center;outline: none;" contenteditable>7</span>
</span>

My problem is, when I try to delete this 'fraction' span (the outer span, and it should be deletable, as this is a Maths WYSIWYG Program), it just removes the content of the two inner contenteditable spans. When I try to delete it (obviously from outside the outer span but inside the contenteditable div), I want all three elements to get removed. I don't want the outer span still lingering.

Any solutions?

UPDATE: If there is no way to do this, is there a way to select that whole span element and its contents when the user presses the delete key next to the big fraction span?

解决方案

Just provide the top span with an id:

<span id="editfraction" 
      style="display:inline-block; vertical-align:middle;" 
      contenteditable="false">

and use this to delete it:

$('#editfraction').remove();

If you want to delete the span when the user presses the delete button, use ids, combined with a data attribute on the contentEditable spans.

<span ... data-ondeleteId="#editx" contenteditable>6</span>

See this jsfiddle for an example

这篇关于如何删除整个span元素与内容可编辑跨度内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！