html要素を動的に追加/削除

Question

リクエストに応じてフォームを動的に表示しようとしています。 html要素からHTMLコンテンツを削除する

HTML

<label for="Type" class="required">Type</label> 
<br> 
<input id="f01" name="fieldid[]" type="hidden" value="23"> 
<input class="23" id="01" required="1" name="type" type="checkbox" value="g_magic"><span> G magic</span> 
<div> 
    <div id="div0g_magic"></div> 
</div> 
<input id="f02" name="fieldid[]" type="hidden" value="23"> 
<input class="23" id="02" required="1" name="type" type="checkbox" value="four_five"><span> Four five</span> 
<div> 
    <div id="div0four_five"></div> 
</div> 
</div> 

JAVASCRIPT

$("#01").on("change", function() { 
    var valueid = $("#01").val(); 
    var fieldid = $("#f01").val(); 
    if ($(this).is(":checked")) { 
    send(valueid, fieldid); 
    } else { 
    $("#div0" + valueid).empty(); 
    } 
}); 

function send(valueid, fieldid) { 
    $.ajax({ 
    url: '/echo/js/?js=hello%20world!', 
    success: function (response) { 

     $("#div0" + valueid).html(response.responseText); 

    }, 
    error: function (response) { 
     $("#div0" + valueid).html(response); 
    } 
    }); 
} 

$("#02").on("change", function() { 
    var valueid = $("#02").val(); 
    var fieldid = $("#f02").val(); 
    if ($(this).is(":checked")) { 
    send(valueid, fieldid); 
    } else { 
    $("#div0" + valueid).empty(); 
    } 
}); 

function send(valueid, fieldid) { 
    $.ajax({ 
    url: '/echo/js/?js=hello%20JS!', 
    success: function (response) { 

     $("#div0" + valueid).html(response.responseText); 

    }, 
    error: function (response) { 
     $("#div0" + valueid).html(response); 
    } 
    }); 
} 

CSS

.required:after { 
    color: #e32 !important; 
    content: ' * ' !important; 
    display: inline !important; 
} 

Answer 1

document.getElementById("element_id").innerHTML="" 

html要素

document.getElementById("element_id").innerHTML="<p>This is a new content</p>" 

Answer 2

にHTMLコンテンツを追加する私はあなたのコードを見ることができないので、私はこの上で完全に確認することはできませんが、あなたが動的にフォームまたはフォームを表示/非表示にしたいように聞こえます要求に応じてこれはjQueryで簡単に実現できます。 ＃要素-idは、あなたが/非表示を表示したい要素のIDです

$("#element-id").hide(); 

または

$("#element-id").show(); 

：あなたはこのコードを使用します。あなたがIDを回避したり、一度に複数の要素を非表示にしたい場合は、要素に '要素、クラスのようなクラスを与えることができ、その後、あなたが使用します。

$(".element-class").hide(); 

を、これはあなたがするために探していたものでない場合更新してください/コメントしてください、うまくいけば誰かがもっと助けることができます！

Answer 3

メソッドsend（）make conflict。変更機能のsend（）に別の名前を付けてください。