jQuery를이 노드를 복사, 삭제

직접 코드에 아무 말도하지 :

케이스 소스 (작업에 사용됩니다)

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 선두 > 
    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > jQuery를删除,复制节点</ 타이틀 > 
    < 스크립트 타입 = "텍스트 / 자바 스크립트" SRC = ".. "/jquery-3.4.1.min.js > </ 스크립트 > 
    < 스타일 > 

        .box { 

            폭 : 300 픽셀 ; 
            높이 : 300 픽셀 ;: 1 픽셀의 솔리드 레드 ; 
        } 
    </ 스타일 > 
</ 머리 > 
< 몸 > 

<! - 삭제 -> 
<! - 검색어 제거합니다 분리 빈 -> 
<! - 
구문 : 
$ (태그 객체) .remove (); 
$ (라벨 객체) .empty (); 
$ (라벨 객체) .detach () · · · 


-> 
< DIV 클래스 = "상자" > 
    < P ID = "A" > 행복 미드! </ ρ- > 
    < ρ- > 내일, 아니 클래스 </ ρ- > 
</ DIV > 

<스크립트 > 

    $ ( 함수 () { 

        $ ( " # A " ) .click에게 ( 함수 () { 

            경고 ( " 绑定测试" ); 
        }) 


    }) 

    // $ ( "# a를") (제거).; 


</ 스크립트 > 
</ 몸 > 
</ HTML >

테스트 결과 :

테스트 시작 : 삭제

개별적으로 테스트됩니다 삭제 될 세 개의 키가 있습니다 빈 분리를 제거하다

없애다:

결과는 다음과 같습니다

삭제 한 다음 상자에이 추가

테스트 결과는 돌아올 :

제거하는 데 사용하면 포인트를 작성하는 경고의 부족도 아니다 방법을 알아보십시오, 즉, 바인딩 트랜잭션이 실패 제거한다

당신은 여전히 선택 VAR 사용할 수 있다면, 그것은 노드를 삭제하고 자신을 유지하는 것입니다 제거 할뿐만 아니라 업무를 결합하는 데 실패

빈 사용

그냥 내용, 스타일 및 보존 노드를 제거

(그래서 조심)

사용의 분리

테스트 결과 :

또한 자신을 유지하기 위해, 노드를 삭제할 수 있지만 이벤트가 실패를 결합하지 않았다

요약 :

제거 : 사용은, 노드를 삭제 자신을 유지하기 위해, 이벤트를 바인딩 실패

empty : 使用是清空内容，保留节点和样式，要慎用

detach: 使用是删除节点，保留自身，绑定事件有效

---------------------------------------------------------------------------------------------------------------------

复制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制节点</title>
    <script type="text/javascript"src="../jquery-3.4.1.min.js"></script>
    <style>
        .shop_car{
            width: 400px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<!--要有一个商品栏-->
<div class="shop">
    <p>商品1</p>
    <p>商品2</p>
    <p>商品3</p>

</div>
<body>


<div class="shop_car">
<!--    这里就是购物车-->

</div>


<script>
    /*
    语法：
    $(标签对象).clone(boolean);
     */
    //需求点击哪一个就将其添加到购物车中
    //制造绑定事件
    $(function () {
        $(".shop p").click(function () {
            //找到要复制的节点并复制

            var p = $(this).clone(true);
            //添加到购物车中
            $(".shop_car").append(p);

        })
      

    })




</script>




</body>
</html>

结果:

jQuery를이 노드를 복사, 삭제

추천