Removing, replacing and cloning

Removing and replacing items

Removing and replacing items

Besides just creating new content, there will be times when you want to remove existing content, or replace content with new content. As you might have guessed, jQuery offers you this power as well.

remove and empty

Both remove and empty completely delete items from the DOM. The difference between the two is what they delete. In the case of remove, it will delete the item you target, while empty deletes the contents of the item you target.

Consider the following starting HTML

<div id="target">
    <div>Some cool content</div>
    <div>Some more cool content</div>
</div>

If you called $('#target').remove(), the resulting HTML would be, well, nothing. The entire contents of the sample are removed.

Contrast that with calling $('#target').empty(). empty deletes the contents of the target, so the resulting HTML would be as follows

<div id="target">
</div>

replaceAll and replaceWith

If you wish to replace existing content with new content, jQuery offers replaceAll and replaceWith. In both cases, you'll provide what existing content you wish to replace, and what new content you wish to use. The difference between the two is the order in which you pass the existing and new content.

If you had the following starting HTML...

<div id="target">
    <div>Some cool content</div>
    <div>Some more cool content</div>
</div>

...and you wanted to finish with the following HTML...

<div>NEW content</div>

...then either method below would work.

// replaceWith replaces the content on the left with the new content in the parameter
$('#target').replaceWith('<div>NEW content</div>');

// replaceAll replaces the target in the parameter with the content on the left
$('<div>NEW content</div>').replaceAll('#target');

NOTE When using either replaceAll or replaceWith, the entire element is replaced, not just the contents of the element. Use both functions with caution.

Cloning

Clone

The main reason to use jQuery is because it makes "day to day" programming in JavaScript much easier, offering functionality and capabilities common to other programming environments. Because the basic operations become that much easier, it allows you to focus your attention on the cooler features you wish to add to your pages, adding interactivity, and making your page seem more like a locally installed application.

This is where the humble function clone comes into play. clone allows you to make a copy of jQuery objects.

clone in the real world

There are several scenarios in which clone simplifies content creation. Let's say you were building a page to allow an administrator to create email addresses and passwords. You'd like to ensure the administrator can create as many accounts as they would like on one page, and be able to send up all of the information to the server in one round trip, rather than using Ajax calls or submitting the form for each account.

This requires the ability to dynamically add labels and textboxes. You could do that this way

<button type="button" id="add-line">Add new line</button>
<div id="container">
 <div class="user-entry">
  <label>Email:</label>
  <input type="email" />
  <label>Password:</label>
  <input type="password" />
 </div>
</div>

$(function() {
 $('#add-line').click(function() {
  $('#container').append('<div class="user-entry"> <label>Email:</label> <input type="email" /> <label>Password:</label> <input type="password" /> </div>');
 });
});

It would work. But you've got a large string literal in JavaScript, which can be tough to debug when you got to make changes. In addition, whatever tool you're using to create your page isn't going to be able to offer you any support for the HTML that's inside of the string literal. And finally, we have the same markup twice, both in the starting HTML and in the JavaScript. (Granted, we could clean that up by adding the first line in through JavaScript, but that's not really the best solution here.)

A better way to solve this problem would be to clone the starting HTML that makes up the user information form, and then use that clone to add the new content. (The HTML below hasn't changed from above, it's copied for readability.)

<button type="button" id="add-line">Add new line</button>
<div id="container">
 <div class="user-entry">
  <label>Email:</label>
  <input type="email" />
  <label>Password:</label>
  <input type="password" />
 </div>
</div>

 $(function() {
  $userForm = $('.user-entry').clone;
 $('#add-line').click(function() {
  $('#container').append($userForm.clone());
 });
 });

Let's break down the code just a bit here. For starters, you'll notice on line 2 that we are grabbing a clone of the item with the class of user-entry. This contains the form for inputting the user. You'll also notice we use a variable that starts with $. This is common in jQuery to indicate the object is a jQuery object.

On line 4, you'll notice we use the $userForm in append to add the markup (or jQuery object) we copied earlier. What you'll also notice is we're calling clone() a second time. The reason for this is how JavaScript passes parameters. When you're working with an object, JavaScript passes a reference to the object, not a copy of the object. This would mean that we've added in a pointer to the clone we created earlier, not a brand new copy. The end result of this is if we called append a second time, we'd be trying to add the exact same object into the container again, not a brand new copy. By calling clone() again on line 4, we pass in a copy of our user form, rather than a pointer to the one we already used.

Below is a Pen with the code. You can use this to play around with the JavaScript, and see the impact removing clone has.

Combining cloning and animations

Cloning and animations

Now that we know how to clone items to simplify creation of dynamic content, and how to animate them to add some additional punch to our pages, let's see how we could bring it all together.

In the cloning section, we had the following demo HTML:

<button type="button" id="add-line">Add new line</button>
<div id="container">
  <div class="user-entry">
    <label>Email:</label>
    <input type="email" />
    <label>Password:</label>
    <input type="password" />
  </div>
</div>

and the following JavaScript:

 $(function() {
  $userForm = $('.user-entry').clone();
 $('#add-line').click(function() {
  $('#container').append($userForm.clone());
 });
 });

Let's modify our code to provide animation to the new elements. We'll start making sure our cloned item is hidden by using the css function. Because $userForm is a jQuery object, manipulate it just like any other jQuery object.

// Insert after line 2
$userForm.css('display', 'none');

When we call append, we know that the new item is going to be the last element in the container. We can access container's children by using children, and access the last one by calling last.

We also know that the item is hidden, because we set it to be hidden. If we call show, it will then display, with the animation. We can accomplish this by cloning it into a variable, adding the new variable, and then calling show on the new variable.

// Replace line 4
var newUserForm = $userForm.clone();
$('#container').append($newUserForm);
newUserForm.show(750);

Our final JavaScript becomes:

$(function() {
 $userForm = $('.user-entry').clone();
  $userForm.css('display', 'none');
 $('#add-line').click(function() {
    var newUserForm = $userForm.clone();
  $('#container').append($newUserForm);
    newUserForm.show(1000);
 });
});

You can play with the full result in the Pen below.