如果可能，高效克隆和刪除方法

我希望有人能幫助我。如果可能，高效克隆和刪除方法

我需要克隆隱藏文本，並且不管隱藏文本的狀態如何，克隆都會被刪除。現在「隱藏」文本將顯示並在克隆時生成克隆，但刪除功能不能在克隆上運行。相反，克隆複製文本的刪除功能會影響克隆。我希望克隆副本能夠保留與隱藏文本相同的事件，但與其從中複製的狀態無關。

我想弄清楚如何使用克隆和刪除方法與我建立的表。我使用.data（array [1]）和.hide和.show在線搜索。但爲了讓我的想法開始工作，我需要使用刪除和克隆，如果可能的話！

我非常感謝！

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script> 
var count = 1; 
var $clone = $(".t1").clone(true) 
$(document).ready(function(){ 
    $(".hide0").click(function(){ 
     $(".t0").hide(); 
    }); 
    $(".show0").click(function(){ 
     $(".t1 , .t0").show(); 
    }); 

    $(".hide1").click(function(){ 
     $(".t1").remove(); 
    }); 
    $(".show1").click(function(){ 
    if(count < 2) { 
     $(".t1").clone(false).appendTo("body"); 

     count++; 
     } 
    }); 

}); 
</script> 
</head> 
<body> 

<div class="t0">Original Text. <br /></div> 
<button class="show0">Add Project</button> 
<br /> 

<div class="t1" style="color:red; display:none;"> 
Hidden Text when removed, clone copy is removed and cannot be regenerated. Clone copy should hold the same events as the original but independent of the status it was copied from. <br> 
<button class="show1">Add Project</button> 
<button class="hide1">Remove Project</button><br /></div> 

<div class="t2" style="color:blue; display:none;"> 
If you click on the "Hide" button, I will disappear.<br> 
<button class="hide2">Remove Project</button><br /></div> 

</body> 
</html>

來源

2017-04-03 Torey Earl

這裏是一個視覺小提琴：https://jsfiddle.net/#&togetherjs=dbALiksKfi –

請解釋一下你要完成什麼，輸出代碼產生，以及你期望它做什麼。 – 4castle

我需要克隆隱藏文本，並且不管隱藏文本的狀態如何，都要刪除克隆。現在「隱藏」文本將顯示並在克隆時生成克隆，但刪除功能不能在克隆上運行。相反，克隆複製文本的刪除功能會影響克隆。我希望克隆副本能夠保留與隱藏文本相同的事件，但與其從中複製的狀態無關。 –

我相信你的問題是如何處理動態創建元素的事件（在這種情況下，在t1類中按鈕添加和刪除）。

代碼

$(document).on("click", ".show1", function(e) { 

    if ($(".t1").length < MaxRows) { 
     addRows(); 
    } 

    }); 

    $(document).on("click", ".hide1", function(e) { 

    $(this).parent(".t1").remove(); 

    });

以及第二個問題是克隆的元件。如果您執行以下會更容易：

創建一個名爲original
克隆這個original
變化original類名t1
將其追加到row或container類持有的div你克隆

代碼

function addRows() { 

    $(".t1-original") 
    .clone(false) 
    .removeClass("t1-original") 
    .addClass("t1") 
    .appendTo(".data-rows") 
    .show() 
    .find(".name").html(new Date().toISOString() + " <br/>"); 

}

var MaxRows = 3; 
 

 
function addRows() { 
 

 
    $(".t1-original") 
 
    .clone(false) 
 
    .removeClass("t1-original") 
 
    .addClass("t1") 
 
    .appendTo(".data-rows") 
 
    .show() 
 
    .find(".name").html(new Date().toISOString() + " <br/>"); 
 

 
} 
 

 
$(document).ready(function() { 
 

 
    $(".show0").click(function() { 
 
    // $(".t1 , .t0").show(); 
 
    if ($(".t1").length < MaxRows) { 
 
\t \t \t addRows(); 
 
    } 
 
    }); 
 

 
    // .hide0 class does not exist? 
 
    $(".hide0").click(function() { 
 
    $(".t0").hide(); 
 
    }); 
 

 
    $(document).on("click", ".show1", function(e) { 
 

 
    if ($(".t1").length < MaxRows) { 
 
     addRows(); 
 
    } 
 

 
    }); 
 

 
    $(document).on("click", ".hide1", function(e) { 
 

 
    $(this).parent(".t1").remove(); 
 

 
    }); 
 

 
    // $(".hide1").click(function() { 
 
    // $(".t1").remove(); 
 
    // }); 
 

 
    //$(".show1").click(function() { 
 
    // if (count < 3) { 
 
    // $(".t1").clone(false).appendTo("body"); 
 
    // 
 
    // count++; 
 
    // } 
 
    //}); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="t0"> 
 
    Original Text. 
 
    <br /> 
 
</div> 
 

 
<button class="show0">Add Project</button> 
 
<br /> 
 

 
<div class="t1-original" style="color:red; display:none;"> 
 
    <span class="name"></span> Hidden Text when removed, clone copy is removed and cannot be regenerated. Clone copy should hold the same events as the original but independent of the status it was copied from. 
 
    <br> 
 

 
    <button class="show1">Add Project</button> 
 
    <button class="hide1">Remove Project</button> 
 
    <br /> 
 
</div> 
 

 
<div class="data-rows"> 
 

 
</div> 
 

 
<div class="t2" style="color:blue; display:none;"> 
 
    If you click on the "Hide" button, I will disappear. 
 
    <br> 
 

 
    <button class="hide2">Remove Project</button> 
 
    <br /> 
 
</div>

來源

2017-04-04 01:53:26

如果可能，高效克隆和刪除方法

回答

相關問題