1

私は現在、単純な To Do リストを作成することで Javascript を学習しています。Javascript によって生成された HTML コンテンツを削除する方法を知りたいです。'x'ユーザーがタグの間で を押すと、<span>そのアイテムが削除されます。

    var doc = document;

    function addText(){

    var input = doc.getElementById('input').value;
    doc.getElementById('do').innerHTML += "<li>" + input + " <span> x </span>" + "</li>";

  }

HTML:

<form>
<input type='text' id='input' />
<input type='button' onclick='addText()' value='Add' />
</form>

<ul id="do"> </ul>

JSFIDDLE

4

2 に答える 2

1

使用する：

onclick='this.parentNode.parentNode.removeChild(this.parentNode)'

そのような：

doc.getElementById('do').innerHTML += "<li>" + input + " <span onclick='this.parentNode.parentNode.removeChild(this.parentNode)' > x </span>" + "</li>";

あなたのフィドルが更新されました。

注:cursor: pointer CSSも追加したのでx、ユーザーにとっては意味があります。

于 2013-06-16T21:18:59.467 に答える
1

あなたは JavaScript を学んでいるので、コードと受け入れられた回答を見て、次の 3 つのことに注意する必要があります。

A. _ 単一のDOM 要素innerHTMLの追加には使用しないでください。

あなたのコードでは、 を実行しています。これは、毎回....innerHTML += ...完全に再マークアップされ、挿入されることを意味します。innerHTML

つまり、 10thliの場合、10 個のアイテムを追加しています。11thliの場合、1 ではなく 10 を削除してから 11 項目を追加します。これはパフォーマンスが悪く、挿入されるたびにすべての s を再度DOM追加する意味がありません。lili

innerHTML1回の操作に適しています。

B. _ インライン JavaScript は絶対に使用しないでください。

それにはたくさんの理由があります。その上、コミュニティの他の開発者はそれを嫌っています。そして、それを使った質問を見ると、彼らは逃げ出します。

<span onclick='this.parentNode.parentNode.removeChild(this.parentNode)' >

これは悪い、悪い、非常に悪いです！

C. _ イベント委任を使用してください。

この答えを見てください。

要するに、すべての に複数のクリック機能を持たせる代わりに、 にli単一の機能を持たせる方が良いのulです。をクリックするliと、 もクリックされulます。liでクリックされたものを確認しul、次のように削除できます。

HTML :

<form>
    <input type='text' id='input' />
    <input type='button' id='add-btn' value='Add' />
</form>
<ul id="do"> </ul>

JavaScript :

var doc = document,
    parentUL = document.getElementById('do'),
    addBtn = document.getElementById('add-btn');

addBtn.addEventListener('click', function() {    
    var input = doc.getElementById('input').value,
        li = doc.createElement('li');

    // use innerHTML only to set the conetnt of single DOM item
    li.innerHTML = input + '<span style="cursor: pointer; color: red; margin-left: 20px" > x </span>';

    // append only once on every create
    parentUL.appendChild(li);
});

// delegate UL's click to li, by checking target item
parentUL.addEventListener('click', function(evt) {
    // check the real target
    var target = evt.target,
        liNode = target.parentNode;
    parentUL.removeChild(liNode);
});

注:addEventListenerは最新のブラウザー専用です。クロスブラウザのことについては、この回答を確認してください。
これらすべてをまとめると、以前の小さなコードのオーバーヘッドのように見えるかもしれませんが、これは世界と JavaScript を救う良い習慣です。
あなたは答えを受け入れましたが、上記のコードでフィドルを更新しました

于 2013-06-17T11:48:48.527 に答える