CODEWITHSUNDEEP
jqueryhtml
user6145950
user6145950

Reputation:

How can i hide an element which is inside an element?

I have a span element inside my p element. When I click the span, editable area shows up.

I want to hide the span in my editable input area.

How can i make it?

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

Upvotes: 3

Views: 111

Answers (8)

RRR
RRR

Reputation: 1084

Hi instead of trying to tweak around with jQuery... you can solve the issue by simply placing the span outside the paragraph ... kindly check https://jsfiddle.net/9v7kbr1g/14/

HTML

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

CSS

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

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

.pencil{
  margin-top:10px;
}

.clear{
  clear:both;
}

jQuery (Same as yours I didnt edit anything)

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

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use contents() at this context,

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

DEMO

Or a javascript solution using .firstChild

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

DEMO

And the best option would be wrapping that required text in a span like below,

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

Upvotes: 4

Rando Hinn
Rando Hinn

Reputation: 1322

Use Wysihtml instead, as this does what I understand that you want. It is a fully-fledged HTML5 What You See Is (What You Get) HTML5 editor, used for an example in Voog CMS. Has all and more features you'd like.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337580

You can achieve this by placing the unicode pencil character in the HTML using a CSS pseudo element, so that it's ignored as part of the text() content of the p. This makes the JS much simpler and means you don't have to change it at all. Try this:

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

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

$(".editable").keyup(function() {
    var keyed = $(".editable").val();
    $(".text").text(keyed);
});
p.edit-trigger:after {
    content: '\2710';
    font-size: 20px;
    cursor: pointer;
}

.editable {
    word-break: break-all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text edit-trigger">Lorem ipsum.</p>
<input type="text" class="editable" />

Upvotes: 2

vishu
vishu

Reputation: 231

Hey you can try this in your code:

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

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : you can clone the p element and remove span and then read text.

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

JSFiddle Demo

Upvotes: 0

25r43q
25r43q

Reputation: 623

use display: none in the css

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

Here is what you can do:

  • Get the text node of p element and get text without span tag
  • Set html of p tag using input field text and span html

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

$("span").click(function() {
 $(".text").css("color", "red");
 var val1 = $('p').contents().filter(function() {
  return this.nodeType === 3; //Node.TEXT_NODE
 }).text();
 $(".editable").show().val(val1);
});

$(".editable").keyup(function() {
 var keyed = $(".editable").val();
 $(".text").html(keyed + "<span>&#x2710;</span>");  
});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">Lorem ipsum.<span>&#x2710;</span></p>
<input type="text" class="editable"/>

Upvotes: 3

Related Questions