jQueryの - divの

Question

こんにちは内にない要素を削除する方法I以下のHTML持っている：私は今

$('#screenlist').append(url + '</br>'); 

：

<div id="screenlist"> 
www.sampleurl.com</br> 
www.sampleurl.com</br> 
www.sampleurl.com</br> 
www.sampleurl.com</br> 
www.sampleurl.com</br> 
www.sampleurl.com</br> 
</div> 

を私はそのリスト内のURLを追加し、ボタンを持っていますいずれかのリンクを削除するために「X」を追加したいとします。私が作成したすべての要素に動的なものとクリックしたときに、完全な行が削除されることになるというspan要素にクリックイベントを添付することができますどのように

$('#screenlist').append(url + ' <span class="delete_icon" /></br>'); 

？

ヒント？

Answer 1

スパンタグに添付されたコンテンツをラップできますか？私が作成したすべての要素に動的なものとクリックしたときに、完全な行が削除されることになるというspan要素にクリックイベントを添付することができますどのように

$('.delete_icon').click(function() { 
 
$(this).parent().hide('slow'); 
 
});

#screenlist span { 
 
    display: flex; 
 
} 
 

 
.delete_icon { 
 
    background-color: red; 
 
    color: white; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="screenlist"> 
 
    <span>www.sampleurl.com<span class="delete_icon">x</span></span> 
 
    <span>www.sampleurl.com<span class="delete_icon">x</span></span> 
 
    <span>www.sampleurl.com<span class="delete_icon">x</span></span> 
 
    <span>www.sampleurl.com<span class="delete_icon">x</span></span> 
 
    <span>www.sampleurl.com<span class="delete_icon">x</span></span> 
 
</div>

Answer 2

？

問題はelementが何であるかのあなたの前提であり、あなたの例の文脈では、それがより密接に、あなたがそのように処理するために持っていることを意味する、list of textを表し、それは、任意の自己（this）またはを破りますparentまたは問題に取り組むために通常使用される兄弟型の相対論理。

この場合、一部の要素では各要素の一意のIDをシムに入れます。

作品、

<span id='link_001'>www.sampleurl.com</span> 
    <span class="delete_icon" onclick="document.getElementById('link_001').remove()"/></br> 

をお勧めします。しかし、あなたはまだ、その後長引くX削除アイコンを持っていますありません。あなたはただやみくもにそのparentを削除するか、また、その後、削除するURLについてXの情報を提供し、いくつかのユニークな識別子できるように、同じ高い要素の一部としてURLとX削除アイコンを持っているいずれかの必要

Xを削除してコードを削除してください。

推奨

推奨されるアプローチは、順不同リスト（ul）内の各URLをラップします。 ulは、リストアイテム（li）がこれらのタイプのタスクの一般的なコンテナとして機能するため、例としてのみ提供されています。つまり、spanまたはdivは、liの代わりにうまく動作するはずです（ul/liが望ましくない場合）。

Xは、同じ親要素（li）の一部であるため、テキストデータの配列を解析することなく、すぐに見つけて削除することができます。

<ul> 
<li>http://stackoverflow.com <span style="cursor: pointer;" onclick="remove(this)">x</span></li> 
<li>http://askubuntu.com <span style="cursor: pointer;" onclick="remove(this)">x</span></li> 
</ul> 

<script> 
function remove(o) { 
    o.parentElement.remove(); 
} 
</script> 

質問が特にjQueryを使ってこれを行う方法を尋ねますが、上記の純粋なJavaScriptの例では、追加のコードを提供しません。あなたはいつもなど、$(this)をラップし、onclick="$(this).parent.remove()"を呼び出すことができます希望する場合

Answer 3

あなたのURLの周りのタグをラップすることができないと仮定すると、ここでの可能な解決策である私はジェリーは、私自身の保存方法から一緒に装備し、question and answers here

https://jsfiddle.net/Hastig/ku0t7mey/13/

編集は間違いなくこの男は私の下の例よりもa much more simplified solutionのために答えてお読みください。

$(document).on('click', '.delete_icon', function() { 
 
    var toDelete = $(this).attr('stringStorage'); 
 
    function replaceNodeText() { 
 
     if (this.nodeType === 3) { 
 
      this.nodeValue = this.nodeValue.replace(replaceNodeText.find, replaceNodeText.replace); 
 
     } else { 
 
      $(this).contents().each(replaceNodeText); 
 
     } 
 
    } 
 
    replaceNodeText.find = toDelete; 
 
    replaceNodeText.replace = ""; 
 
    $("#screenlist").contents().each(replaceNodeText); 
 
    $(this).next('br').remove(); 
 
    $(this).remove(); 
 
}); 
 

 

 

 
$(document).on('click', '.appenderator', function() { 
 
    var i = $('#screenlist').attr('ignorethis'); 
 
    var url = 'www.sampleurl' + i + '.com'; 
 
    $('#screenlist').append(url + '<span class="delete_icon" stringStorage="' + url + '">x</span><br>'); 
 
    var iPlusOne = parseInt(i) + 1; 
 
    $('#screenlist').attr('ignorethis', iPlusOne); 
 
});

.delete_icon { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    background-color: red; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 
.delete_icon:hover { background-color: orange; } 
 

 
br { 
 
    line-height: 22px; 
 
} 
 

 
.appenderator { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; transform: translateX(-50%); 
 
    display: inline-flex; 
 
    padding: 2px 8px 2px 8px; 
 
    font-variant: small-caps; 
 
    color: white; 
 
    background-color: hsla(0, 0%, 0%, 1); 
 
    cursor: pointer; 
 
} 
 
.appenderator:hover { 
 
    color: white; 
 
    background-color: hsla(180, 20%, 50%, 1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="screenlist" ignorethis="4"> 
 
www.sampleurl1.com<span class="delete_icon" stringStorage="www.sampleurl1.com">x</span><br> 
 
www.sampleurl2.com<span class="delete_icon" stringStorage="www.sampleurl2.com">x</span><br> 
 
www.sampleurl3.com<span class="delete_icon" stringStorage="www.sampleurl3.com">x</span><br> 
 
</div> 
 

 
<div class="appenderator">appenderator</div>

何それがないと、あなたが追加delete_iconスパンでカスタム属性にあなたのURLを格納しています。行を削除すると、その属性から文字列が取得され、#screenlistでその文字列が検索され、.removeの.delete_iconスパン自体と末尾の<br>タグが削除されます。