-1 
<div id="file">                                    
<input type="file" name="txtImage" multiple="multiple" class="upload" />  
<input type="text"  name="txtImageDesc" class="desc" /> 
</div>      
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />

上記は、呼び出し時に div を追加または削除する 2 つのボタンです。完全に機能する呼び出し時に html に div を追加する Java スクリプト関数があります。

function  add_more() 
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>   <p>
<label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
 document.getElementById("file").innerHTML += txt;
}

ただし、最後に挿入された div を削除するために同じスクリプト (変更あり) を使用していますが、div 内の html 全体を削除しています。コードは次のとおりです。

function  remove() {
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>    
<p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
 document.getElementById("file").innerHTML -= txt;
 }

それが生成する出力は、ボタンのクリック時に最後に挿入されたdivを削除したい

NaN
4

4 に答える 4

3

コメントで既に述べたように、pではなく、ここに要素を追加していdivます。

jQuery を使用したくない場合は、次のように「純粋な JS」でも実行できます。

function lastParagraphBeGone() { // brilliant function name :-)
  var paragraphs = document.getElementById("file").getElementsByTagName("p");
  var lastParagraph = paragraphs[paragraphs.length-1];
  lastParagraph.parentNode.removeChild(lastParagraph);
}
于 2013-04-26T12:55:20.177 に答える
2

Javascript は、連結と加算に同じ演算子を使用します。そのため、追加が機能します。

ただし、マイナス演算子は減算専用です。したがって、数値ではないテキストからテキストを差し引こうとすると、NaN.

この方法では削除できません。関数を使用してこの文字列の先頭を検索して抽出するか、タグにid属性を追加する<p>だけで、不要になったときに簡単に非表示にできます。

于 2013-04-26T12:49:38.207 に答える
2

$('#file p').slice(-2).remove();P要素から最後の 2 つの要素を削除します#file。

LIVE DEMO

HTML:

<input type="button" value="Add" name="addButton" />
<input type="button" value="Remove" name="removeButton" /> 

<div id="file"></div>

jQ:

var html = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"></p>";


$('[name=addButton]').click(function(){
    $('#file').append( html );
});
$('[name=removeButton]').click(function(){
  $('#file p').slice(-2).remove();
});

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice

于 2013-04-26T12:56:26.097 に答える
1

これは私にとってはうまくいきます。この種の機能を壊しているように見えることの 1 つは、テキストの追加が別々の行にある場合です。したがって、そのような「txt」の追加は、常に JavaScript の 1 行に記述してください。

<script type="text/javascript" >
function  add_more() 
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
 document.getElementById("extra-text").innerHTML = txt;
}

function  remove() {
 document.getElementById("extra-text").innerHTML = '';
 }
</script>

<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />


<div id="file"><h1>Existing text</h1>

<div id="extra-text"></div>

</div>
于 2013-04-26T12:59:43.353 に答える