Jquery 如何隐藏元素内部的元素？

我的

p

元素中有一个

span

元素。单击跨度时，将显示可编辑区域

我想将

span

隐藏在我的可编辑

input

区域中

我怎样才能做到

HTML

改用，因为这符合我理解的你想要的。它是一个成熟的HTML5，您看到的就是（您得到的）HTML5编辑器，用于中的示例。具有您想要的所有和更多功能。

尝试在此上下文中使用

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

---

或者使用

.firstChild

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

---

最好的选择是将所需的文本包装成如下所示的跨度

HTML:

---

以下是您可以做的：

• 获取p元素的文本节点并获取不带span标记的文本
• 使用输入字段文本和span html设置p标记的html

$（函数（）{
$（“.editable”）.hide（）；
$（“span”）。单击（函数（）{
$（“.text”）.css（“颜色”、“红色”）；
var val1=$（'p'）.contents（）.filter（函数（）{
返回this.nodeType==3；//Node.TEXT\u Node
}).text（）；
$（“.editable”）.show（）.val（val1）；
});
$（“.editable”）.keyup（函数（）{
var keyed=$（“.editable”）.val（）；
$（“.text”）.html（键入+”✐；”；
});});

Lorem ipsum.&x2710

在css中使用display:none

$("span").click(function() {
  $(".text").css("display", "none"); //<--
  var val1 = $("p").text();
  $(".editable").show().val(val1);
});

$（“span”）。单击（函数（）{
$（“.text”）.css（“display”，“none”）；//试试这个：可以克隆p元素并删除span，然后读取文本

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

嘿，您可以在代码中尝试：

$("span").click(function() {
  $(".text").css("color", "red");
  var val1 = $("p").text();
  $(".editable").show().val(val1);
  $(this).hide();//added this line to hide the span
});

您可以通过使用CSS伪元素将unicode铅笔字符放置在HTML中来实现这一点，这样它就可以作为
p
的
text（）
内容的一部分被忽略。这使得JS更加简单，意味着您根本不必更改它。尝试以下方法：


$（“.editable”）.hide（）；
$（“.edit触发器”）。单击（函数（）{
$（“.text”）.css（“颜色”、“红色”）；
var val1=$（“p”）.text（）；
$（“.editable”）.show（）.val（val1）；
});
$（“.editable”）.keyup（函数（）{
var keyed=$（“.editable”）.val（）；
$（“.text”）.text（键入）；
})；
p.edit-trigger:after{
内容：'\2710'；
字体大小：20px；
光标：指针；
}
.可编辑{
单词break：打破一切；
}

Lorem ipsum

您好，不要试图用jQuery进行调整……您只需将
span
放在
段落
之外即可解决问题……请检查

HTML

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

jQuery（与您的一样，我没有编辑任何内容）

为什么这可能会回答这个问题，只有链接答案不是未来的证明。尝试为你的答案添加更多细节，以供未来读者阅读，例如，当你链接到的网站不再是可访问的好网站，但缺点是它使整个
p
元素可点击为真，这是唯一真正的负面因素。哥们，你真是太棒了艺术我是认真的，真的，但首先要把问题读清楚。哈哈谢谢夸奖。我读了这个问题，很多人也回答了你的问题…我只是想让我提供一个简单的选择。。。
$("span").click(function() {
  $(".text").css("display", "none"); //<--
  var val1 = $("p").text();
  $(".editable").show().val(val1);
});

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

$("span").click(function() {
  $(".text").css("color", "red");
  var val1 = $("p").text();
  $(".editable").show().val(val1);
  $(this).hide();//added this line to hide the span
});

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

span {
  font-size:20px;
  cursor:pointer;
}
.editable {
  word-break:break-all;
}

p.text,.pencil{
  float:left;
}

.pencil{
  margin-top:10px;
}

.clear{
  clear:both;
}

$(".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);  
});