DOM 移除、取代 (jQuery 19)

※DOM移除

官網連結

目前有4個：
.empty()：移除元素，自己的不會移除
.detach()：移除元素，自己的會移除，事件不會移除
.remove()：移除元素，自己的會移除，連事件都會移除
.unwrap()：上一篇已講過

※.empty()

$(function(){
    $('.div2').empty();
});
----------
<div>
    div1
    <div class="div2">
        div2
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    </div>
</div>
<!-- 變成以下的樣子 -->
<div>
    div1
    <div class="div2"></div>
</div>

※可以看出<div class="div2">裡面的才會移除

※.remove()、.detach()

$(function(){   

    $('.div2').remove();
    // $('div').remove('.div2');
    
    // $('.div2').detach();
    // $('div').detach('.div2');
});
----------
<div>
    div1
    <div class="div2">
        div2
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    </div>
</div>
<!-- 變成以下的樣子 -->
<div>
    div1
</div>

※這個例子，這四種寫法都一樣

※.remove()和.detach()的差別

<style>
    .xxx{background-color:yellow};
</style>
    
$(function(){
    $("div").hover(function() {
        $(this).toggleClass('xxx');
    });
    
    var xxx;
    $('button').click(function(){
        if (xxx) {
            $('body').prepend(xxx);
            xxx = null;
        } else {
            xxx = $('div').detach();
        }
    });
});
----------
<div>
    div1
</div>
<button>click me</button>

※滑鼠進出div都會觸發xxx

※按下按鈕後，使用detach的事件可以循環；而remove一移除就破功了

※DOM 取代

官網連結

目前有2個：
.replaceWith()：右邊取代左邊
.replaceAll()：左邊取代右邊

兩個方法功能一樣，但replaceWith()多一個function寫法

$(function(){
    $('p').replaceWith($('.one'));
    // $('.one').replaceAll('p');
});
----------
<div>
    div
    <p>
        p1
        <span>s1</span>
        <span>s2</span>
        <span>s3</span>
    </p>
    <p>
        p2
        <span>s4</span>
        <span>s5</span>
        <span>s6</span>
    </p>
</div>
<h1 class="one">xxx</h1>
    
<!-- 變成以下的樣子，連h1都消失了 -->
<div>
    div
    <h1 class="one">xxx</h1>
    <h1 class="one">xxx</h1>
</div>

※replaceWith的function寫法

$(function(){
    $('p').replaceWith(function(){
            return '<b>bold</b>';
    });
});
----------
<div>
    div
    <p>
        p1
        <span>s1</span>
        <span>s2</span>
        <span>s3</span>
    </p>
    <p>
        p2
        <span>s4</span>
        <span>s5</span>
        <span>s6</span>
    </p>
</div>
<h1 class="one">xxx</h1>
    
<!-- 變成以下的樣子，h1不會消失 -->
<div>
    div
    <b>bold</b>
    <b>bold</b>
</div>
<h1 class="one">xxx</h1>