Cannot clone a paragraph without text using jquery

Question

This example is from a book. It tells me that I can clone the paragraph without text if I set the parameter in the clone() to be false. I checked out the documentation in the jQuery and I tried out all the combination of true and false. The results proved that I cannot copy the paragraph without text. Is it just a bug in jQuery?

<html>
    <head>
        <title>Copying element</title>
        <script src="../jquery-1.8.0.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //copy elment and insert
                $('div.chapter p:eq(0)').clone(false).insertBefore('div.chapter');

            });
        </script>
        <style type="text/css">
            span.footnote{
                font-style:italic;
                display:block;
            }
            .chapter span.footnote{
                display:inline;
            }
            .chapter p{
                width:50%;
            }
        </style>
    </head>
    <body>
        <h1 id="f-title">Flatland: A ROmance of Many Dimension</h1>
        <div id="f-author">by Edwin A. Abbott</div>
        <h2>Part 1, Section 3</h2>
        <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
        <div id="excerpt">an excerpt</div>
        <div class="chapter">
            <p class="squre">Our professional Men and Gentlemen are Squares (to which class I myself belong) and FIve-Sided Figures
                or Pentagons.
            </p>
            <p class="mobility hexagon">Next above these come the Nobility of whoem there are serverl degress
                <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>and from thence rising in the number of theirside till they received the honourable title of 
                <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>
            </p>
            <p><span class="pull-quote">It is a <span class="drop">Law of Nature</span>with us that a mable child shall have </span>    
            </p>
            <p>But this rule applies not always to the Tradesman</p>
            <p>Rarely -- in proportion to the vast numbers of Isosceles
            </p>
            <p>The birth of tha Ture Equlaterial Traignel from Isoscele parents is the subject of rejociing in the coutry for many furlongs.
            </p>
            <p>How admirable is the Law of Compensation!
            </p>
        </div>
    </body>
</html>

The books tells me that my clone result can be : <p class="square"></p> and there is a parameter in Jquery Document [withDataAndEventsA Boolean indicating whether event handlers and data should be copied along with the elements] , so I guess I can clone it without text. — code4j
– code4j, Commented Aug 22, 2012 at 18:57
You misunderstood the docs. The true/false parameter is: "A Boolean indicating whether event handlers should be copied along with the elements". The data is not the text of the element, but data attached to the element: api.jquery.com/data — gen_Eric
– gen_Eric, Commented Aug 22, 2012 at 18:57
Are you saying you want to clone a paragraph, then remove the content from the clone? — jackwanders
– jackwanders, Commented Aug 22, 2012 at 18:58
Reply to Rocket: you are right :) I did not see the sentence [all element data (attached by the .data() method) is also copied to the new copy.] — code4j
– code4j, Commented Aug 22, 2012 at 19:03

Denys Séguret · Accepted Answer · 2012-08-22 19:02:51Z

3

Re-read the clone documentation.

It specifies the element is copied WITH its content (deep copy). The boolean parameters only deals with event handlers and jquery data, not embedded elements.

So this is the normal comportment : the first paragraph in div.chapter ($('div.chapter p:eq(0)')) is copied with its content.

If you want a non-deep cloning function you could use this one :

// clone an element with attributes, without the weight of calling clone and emptying it
// (call it on a non jquery element, using  [0] if necessary)
function nondeepclone(element) {
    var newelem = document.createElement(element.tagName);
    for (var i = 0; i < element.attributes.length; i++) {
        var attr = element.attributes[i];
        newelem.setAttribute(attr.name, attr.value);
    }
    return newelem;
}

but I'm not sure there is a real use for this.

edited Aug 22, 2012 at 19:02

answered Aug 22, 2012 at 18:54

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

code4j Over a year ago

I misundertood the docs and you are right :) and the book also made a mistake orz

Denys Séguret Over a year ago

It's probably the "data" word which was ambiguous, right ? That's the reason why I added the second link.

jackwanders · Accepted Answer · 2012-08-22 19:00:45Z

1

I think what you want is:

$('div.chapter p:eq(0)').clone(false).empty().insertBefore('div.chapter');

This will clone the paragraph, remove its children, then insert it. .clone(false) only means that data and events attached to the original element will not be copied to the clone.

answered Aug 22, 2012 at 19:00

jackwanders

16.1k3 gold badges42 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:56:15Z

1

I don't think you can clone the paragraph without it's text. But you can clear it right after you clone it by setting it's text to blank. (or use .empty() as jackwanders suggested)

see: http://jsfiddle.net/sQF62/1/

see: Jquery clone of a textbox without the content

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Aug 22, 2012 at 18:55

CaffGeek

22.2k18 gold badges106 silver badges186 bronze badges

Comments

Sumit Deshpande · Accepted Answer · 2012-08-23 17:24:25Z

1

I think what your are looking for is -

  $(document).ready(function(){
    //copy element and insert               
    var clone = $('div.chapter p:eq(0)').clone().empty();
    clone.insertBefore('div.chapter');

  });

The empty() method after clone() removes all child elements, data of the selected HTML element.

edited Aug 23, 2012 at 17:24

answered Aug 23, 2012 at 17:05

Sumit Deshpande

2,1552 gold badges21 silver badges36 bronze badges

Collectives™ on Stack Overflow

Cannot clone a paragraph without text using jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related