jquery – 如何隐藏元素内部的元素？

我的p元素中有一个span元素.单击跨度时,会显示可编辑区域.

我想在可编辑的输入区域中隐藏跨度.

我该怎么做？

JSFIDDLE

HTML

<p class="text">Lorem ipsum.<span>&#x2710;</span></p>
<input type="text" class="editable"/>

JS

$(".editable").hide();

$("span").click(function() {
  $(".text").css("color", "red");
  var val1 = $("p").text();
  $(".editable").show().val(val1);
});

$(".editable").keyup(function() {
  var keyed = $(".editable").val();
  $(".text").text(keyed);  
});

尝试在这种情况下使用 contents(),

$("span").click(function() {
  //...other codes
  var val1 = $("p").contents()[0].nodeValue;
  //...other codes
});

DEMO

或者使用.firstChild的javascript解决方案

$("span").click(function() {
  $(".text").css("color", "red");
  var val1 = $("p")[0].firstChild.textContent;
  $(".editable").show().val(val1);
});

DEMO

最好的选择是在下面的跨度中包装所需的文本,

HTML：

<p class="text">
  <span class="textInner">Lorem ipsum.</span>
  <span class="edit">&#x2710;</span>
</p>
<input type="text" class="editable"/>

JS：

$("span.edit").click(function() {
  var $parent = $(this).closest(".text").css("color", "red");
  $parent.next(".editable").show().val($(this).prev(".textInner").text());
});

DEMO