Web Development with jQuery®

(Elliott) #1

(^126) ❘ CHAPTER 4 MANIPULATING CONTENT AND ATTRIBUTES
Figure 4-18 shows the results of the preceding example. When you click any of the buttons, you see
that the button is replaced with a quote.


FIGURE 4-18


In the preceding example, you see that a click event is attached to each button, and upon click-
ing any button, the button is replaced with a quote. For the fi rst two buttons, you make a call to
$(this).replaceWith(), which causes the <input> element to be replaced with the HTML content
passed to the replaceWith() method.

For the second two buttons, the content you want to use for replacement is selected instead of
directly provided, as p#mitchHedbergQuote3, for example, then the replaceAll() method is called,
and you provide the item you want to replace as an argument to that method. In the preceding
example, you pass the this keyword, but you can also use a selector. Essentially, you fi nd that the
logic is reversed from the replaceWith() method demonstrated earlier in this section.

Removing Content


Removing content can be done in a variety of ways. You can, for example, use the replaceWith() or
html() methods in conjunction with an empty string. But jQuery also provides methods that are spe-
cifi cally designated for the removal of content, the empty() and the remove() methods. The following
document, Example 4-14, demonstrates how both of these methods are used:

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />

http://www.it-ebooks.info

Free download pdf