1

私のjsFiddle http://jsfiddle.net/JV8eU/をチェックしてください

jQuery関数divを使用してタグを複製しましたclone()

誰かが「新規追加」をクリックするとタグの新しいクローンdivが追加され、誰かが「削除」をクリックするとそのdivタグが削除されます。

これには 1 つの問題があります。元の div タグにも削除ボタンが含まれているため、誰かがそれをクリックすると、元の div タグも削除されます。

コードの実行時にその削除リンクを表示したくありません。誰かが追加をクリックすると、削除リンクが div タグのクローンとともに表示されます。

4

6 に答える 6

3

まず、削除ボタンdivでそれを非表示として指定し、コードで以下の変更を行います...

$(document).ready(function(){
    $("#Add").click(function(){
        $("#id").removeAttr("hidden");
        $("#id").show("slow");
        var obj =  $("div.content").eq(0).clone(); //this will clone the html elements
        $("div.row").append(obj); //this will append to the existing elements
    });
});

と体の中で..

<div class="pull-left"><a href="#" onclick='removeDOM(this)' id="id" hidden>Remove</a></div>
于 2013-02-11T08:19:48.687 に答える
2

これはあなたが何を意味するのですか？http://jsfiddle.net/JV8eU/11/

新しいコンテンツを追加する前に、remove div を動的に追加できます。このように： obj.append('<div class="pull-left"><a href="#"onclick="removeDOM(this)">Remove</a></div>');

于 2013-02-11T08:29:32.250 に答える
2

デフォルトの機能をオーバーライドするときは、これがあなたの味方であることを常に覚えておいてください。

e.preventDefault();

この JSFiddle はうまく機能しているようです: http://jsfiddle.net/turiyag/JV8eU/9/ 初期要素も維持したい場合は、このコードでうまくいきます: http://jsfiddle.net/turiyag/ JV8eU/13/

于 2013-02-11T08:29:56.647 に答える
0

HTMLからボタンを削除し、ボタンがクリックされたときに追加します....

 var newRemoveButton ='<div class="pull-left"><a href="#" onclick='removeDOM(this)' id="id" hidden>Remove</a> </div>';
 $(newRemoveButton).appendTo(obj);

このリンクを見て、いくつかの効果を追加することもできます。

于 2013-02-11T08:55:33.613 に答える
0

行のテンプレートを別の要素に入れます。

<div class="template">
  <div class="content">
    ...the row template goes here
  </div>
</div>
<div class="row">
</div>

テンプレートを非表示にします。

.template { display: none; }

テンプレートから行を最初から 1 回コピーし、リンクがクリックされたときに:

function copy() {
    $("div.row").append($(".template .content").clone());
}

$(document).ready(function () {
    copy();
    $("#Add").click(copy);
});

デモ: http://jsfiddle.net/JV8eU/14/

于 2013-02-11T08:31:11.280 に答える
0

より良い実装を考えただけです。元のものを常に非表示にするのではなく、条件付きで非表示にします。

ここにJsFiddleがあります

function removeDOM(thisObj){
if($('.content').size() == 2){
    $($('.remove-link').not(thisObj)[0]).hide();
}
if($('.content').size() != 1)
    $(thisObj).parent().parent().remove();
}

利点は、ユーザーが好きな行を削除できることです。

于 2013-02-11T08:33:36.053 に答える