2

アイコンをクリックするとli要素を削除する機能があります。olが完全に空になったら、ユーザーが新しい要素をリストにドラッグ アンド ドロップできるように、 を少しオフのフィラー マテリアルolに置き換えたいと思います。（ショッピングカートの設定のようなものです。）lili

私が直面している問題は、jQuery を使用すると DOM から削除されますが、jQuery.remove()はli削除されないということです。したがって、たとえば、呼び出し.has(".li")はすべての li がなくなった場合でも true を返し、呼び出しはにこれまでに存在したことchildNodes.lengthのあるの総数を返します。コードは次のとおりです。liol

 function onClick(element)
        var parent = $(element).parent().attr('id');
        $(element).remove();
        var container = document.getElementById(parent);
        console.log(container.childNodes.length); //always logs the total number that have ever existed

        if(container.childNodes.length < 1){
            parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");

要素が DOM から削除された後にのみ親コンテナーを取得するように注意したため、これは問題ではないと確信しています。

何か案は？

編集: 要求さulれたli構造:

<h4>Components</h4>
     <ol id="components" class="droppable">
         <li class="placeholder">Drag and Drop Components Here</li>
     </ol>

ユーザーは、次のコードをリストにドラッグ アンド ドロップします。これは$.get、一部の php スクリプトから取得されます。

     <li id="$id"><table style="color:white"><tr><td>$this->longname</td>
     <td><a href="#$id" onclick="destrComp(this);" title="Delete this image" class="ui-icon ui-icon-circle-close">Delete image</a></div></td></tr></table></li>

クリック ハンドラーは上記のコードです。

4

2 に答える 2

1

あなたのコードによると、「a」タグを削除しているようですが、親は削除していません。

$(element).remove(); //This removes the a tag
$(element).parents('li').remove(); //This removes the parent li element
于 2013-10-19T14:13:34.713 に答える
1

onClickの代わりに関数名を間違えたと仮定するとdestrComp、複数の問題があります。

クリックハンドラーには、li想定どおりの要素ではなく、クリックされたアンカー要素を渡しているため、要素を扱っていない場合は、扱っていると思います$(element).parent()。$(element).remove()

試す

function destrComp(element) {
    var $parent = $(element).closest('ul');
    $(element).closest('li').remove();

    if ($parent.children().length < 1) {
        $parent.append("<li class='placeholder'>Drag and Drop Components Here</li>");
    }
}
于 2013-10-19T14:06:58.057 に答える