1

[+] //このボタンをクリックするたびにテキストボックスが生成され、各テキストボックスの横にリンクが必要です。[削除]をクリックするとリンクが「削除」され、テキストボックスが削除されます。

[hello1]削除

[hello2]削除

[hello3]削除

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i=0,j=0;
var t1= new Array(); 
function createtext(){
  i++;
  t1[i]=document.createElement('input');
  t1[i].type='text';
  t1[i].name='text'+i;
  t1[i].value = "hello"+i;
  t1[i].size = 10;
  document.forms[0].appendChild(t1[i]);
  var mybr=document.createElement("br");
  document.forms[0].appendChild(mybr);
}
</SCRIPT>
</HEAD>
<BODY >
  <form action="" method="get" name="f1">

    <input name="b1" type="button" onClick="createtext()" value="+">

    <input name="b1" type="Submit"><br>

  </form>
</BODY>
</HTML>
4

3 に答える 3

2

これは簡単です。

次のように、新しく作成された各テキストエリアに割り当てられるテキストフィールド配列にid属性を追加するだけです。

t1[i].id='some_unique_suffix'+i
t1[i].onClick='remove("some_unique_suffix"'+i+')'

次に、ループを介して各テキストフィールドの後に削除リンクを作成し、その特定のテキストフィールドのIDを次のように削除リンクをクリックすると呼び出される削除関数に渡すことができます。

function remove(id)
{
    $('#some_unique_suffix'+id).remove(); 
}

あなたがアイデアを得ることを願っています。

于 2012-08-28T06:20:32.863 に答える
0

次のように、入力タグとともに削除ボタンを追加できます。

var i=0,j=0;
var t1= [];

function add(){
    i++;
    var parent = document.forms[0];
    var div = document.createElement('div');
    var input = document.createElement('input');
    input.type='text';
    input.name='text'+i;
    input.value = "hello"+i;
    input.size = 10;
    t1.push(input);
    div.appendChild(input);
    var removeButton = document.createElement("button");
    removeButton.innerHTML = "Remove";
    removeButton.onclick = function(e) {
        this.parentNode.parentNode.removeChild(this.parentNode);
        return(false);
    };
    div.appendChild(removeButton);
    parent.appendChild(div);
}

作業デモ： http： //jsfiddle.net/jfriend00/ky9nv/

このコードを使用すると、入力要素とそれに関連するボタンを、含まれているdivで囲むことで簡単に削除できます。クリックされたボタンは、その親コン​​テナを取得して削除するだけです。

そして、あなたの質問はjQueryでタグ付けされているので（ここではあまり節約できないと思います）、jQueryを使用するバージョンは次のとおりです。

var i=0,j=0;
var t1= [];

function add(){
    i++;
    var div = $('<div>');
    var input = $('<input>')
        .attr({
            size: '10',
            type: 'text',
            name: 'text' + i,
            value: 'hello' + i
        }).appendTo(div).get(0);
    t1.push(input);
    $('<button>Remove</button>')
        .click(function() {
            $(this).parent().remove();
        }).appendTo(div);
    $("#myForm").append(div);
}

add();
add();

$("#add").click(add);

実例： http： //jsfiddle.net/jfriend00/nbXak/

于 2012-08-28T06:24:37.537 に答える
0 
<script type="text/javascript">
var i=0;
function createtext() {
    i++;
    $('<div id="field'+i+'">​&lt;input type="text" name="text'+i+'" value="Hello'+i+'" size="10" /> <a href="#" onclick="removeField(\'field'+i+'\');">Remove</a></div>').appendTo('#inputsPlaceholder');
}
function removeField (id) {
    $('#'+id).remove();
}
</script>

HTML：

<form action="" method="get" name="f1" id="f1">
<input name="b1" type="button" onclick="createtext();" value="+" />
<div id="inputsPlaceholder"></div>
<input name="b1" type="submit" />
</form>

試してみてください：http：//jsfiddle.net/Z3L5C/

于 2012-08-28T06:40:18.377 に答える