JavaScriptを使用してボタンをクリックしてdivを削除する

フォームは複製されていますが、必要に応じて 'x'ボタンで削除することはできません。JavaScriptを使用してボタンをクリックしてdivを削除する

私は、以下のようにdiv要素のうち、両方の私のボタンを配置：「+」記号は、より多くのフォームを追加するためにクリックされるたびに

<button type="button" id="cross" class="buttonImgTop" onclick="remChild()"></button> 
<div id="ValuWrapper"> ...content comes here... </div> 
<button type="button" class="buttonImg" onclick="repeat()"></button>

「X」ボタンと「div要素は」クローン化され得ると重複ウェブサイト上で

<script>   
    var i = 0; 
    var original = document.getElementById('ValuWrapper'); 
    var crossButton = document.getElementById('cross'); 
    var n = 0; 

    function repeat() { 
     var clone = original.cloneNode(true); 
     var crossBut = crossButton.cloneNode(true); 
     clone.id = "ValuWrapper" + ++i; 
     crossBut.id = "cross" + i; 
     crossButton.parentNode.appendChild(crossBut); 
     original.parentNode.appendChild(clone);  
     // used for remChild() function 
     n = i; 

} 

    function remChild(){ 

     for(i = 0; i <= n; i +=1) 
     { 
     $("#cross"+[i]).click(function() { 
      $("#ValuWrapper"+[i]).slideUp(400, function() { 
        $("#ValuWrapper"+[i]).remove(); 
        $(this).remove(); 
       }); 
      }); 
     } 
    } 
</script>

は、私は何をしようとしている「X」ボタンをクリックすると、アニメーション「slideUpは（）」で動作します：ここで

は、両方がフォームをクローニングし、それを除去するためのコードです指定されたdivは、ボタンとdivの両方を削除します。これは、クライアントが望む任意の順序で行わなければなりません。しかし、それは動作していないようです。

出典

2017-08-12 Mazin Al-Bahrani

1.ループクロージャを検索する必要があります。 2. idを使用しないでください。 [最も近い方法]（https://api.jquery.com/closest/）を使用してください。3. DOMとjQueryを混ぜないでください。 – mplungjan

htmlを提供してください。 –

@mplungjanなぜ代わりに '休憩'を使用できないのですか？私が関数内で関数を持つことを理解することができず、関数を呼び出すことができなかったので、ループ閉鎖はJavaScriptで正直に混乱しているように見えます。しかし、アクションが1回実行されると、これはループを停止しますか？ –

これは私があなたが欲しいと思っているものです。

は、私はまた、すべてのインラインのイベントハンドラ

$(function() { 
 
    var $original = $('#ValuWrapper'), 
 
    $crossButton = $('#cross'), 
 
    $content = $("#content"); 
 

 
    $content.on("click", ".cross", function() { 
 
    if ($(this).is("#cross")) return false; 
 
    var $cross = $(this); 
 
    $(this).next().slideUp(400, function() { 
 
     $(this).remove(); 
 
     $cross.remove(); 
 
    }); 
 
    }); 
 

 
    $("#repeat").on("click", function() { 
 
    $content.append($crossButton.clone(true).removeAttr("id")); 
 
    $content.append(
 
     $original.clone(true) 
 
     .hide() // if sliding 
 
     .attr("id",$original.attr("id")+$content.find("button.cross").length) 
 
     .slideDown("slow") // does not slide much so remove if you do not like it 
 
    ); 
 
    }); 
 

 
});

#content { height:100%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <button type="button" class="buttonImgTop cross" id="cross">X</button> 
 
    <div id="ValuWrapper"> 
 
    ...content comes here... <br/> 
 
    ...content comes here... <br/> 
 
    </div> 
 
</div> 
 
<button type="button" class="buttonImg" id="repeat">Add</button>

出典

2017-08-13 12:33:00 mplungjan

はい、これは私が欲しかったものです！どうもありがとうございました！私は、情報を持つ最初のdivの表示を隠すか、削除しないかを知りたいだけです。また、なぜDivはValuWrapper1、ValuWrapper2、...などと呼ばれていないのですか？ValuWrapperからValuWrapper13、ValuWrapper26、...などに行くようです。以前のコードではシーケンスに番号を付けました。 –

が更新されました。そして私のコードはここにValuWrapper、ValuWrapper1,2などを表示しています。 – mplungjan

ああ - あなたのコンテンツにもっと多くのダイビングがあります。そして、content.find（ "button.cross"）に変更してください。 – mplungjan

私は、これは何が必要だと思うを削除しているものをハードコーディングが、カウントし、兄弟を削除しないようにしてください。シングルHTMLでフルコードを追加しました。 HavntはまだCSSを使っていませんでしたが、あなたが探している実例です。要件に応じてコピーコンテンツを更新することができます。

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
var i = 0; 
var original; 
var crossButton ; 
var n = 0; 
function repeat() { 
     var clone = original.cloneNode(true); 
     var crossBut = crossButton.cloneNode(true); 
     clone.id = "ValuWrapper" + ++i; 
     crossBut.id = "cross" + i; 
     $(crossBut).text("corss"+i); 
     crossButton.parentNode.appendChild(crossBut); 
      original.parentNode.appendChild(clone);  
      // used for remChild() function 
      n = i; 
} 

function remChild(obj){ 
    $($(obj).next()).slideUp(400,function() 
    { 
     $(obj).next().remove(); 
     $(obj).remove(); 
    });   
} 

$(document).ready(function(){ 
    original = document.getElementById('ValuWrapper'); 
    crossButton = document.getElementById('cross'); 

    $(".buttonImg").click(function(){ 
     repeat(); 
    }); 

    $("body").on("click",".buttonImgTop",function(){ 
     remChild(this); 
    }); 
});  

</script> 
<body> 

<h2>My First JavaScript</h2> 

<button type="button" id="cross" class="buttonImgTop" >remove</button> 
<div id="ValuWrapper"> ...content comes here... </div> 
<button type="button" class="buttonImg" >repeat</button> 


</body> 
</html>

出典

2017-08-13 13:25:13

私の上記のソリューションは、ボタンのシーケンスも持っていると思います –

私のソリューションはより洗練されており、jQueryとDOMの使用で一貫していると思います – mplungjan

私はあなたがコード化した方法を学ぶ良い学習です。 –

JavaScriptを使用してボタンをクリックしてdivを削除する

答えて

関連する問題