Jquery - как удалить элемент, который не находится внутри DIV

Question

Привет У меня есть следующий HTML:

<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 в этом списке:

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

Теперь я хотел бы добавить «X», чтобы удалить любую из ссылок.

$('#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 или относительная логика типа родства, которая обычно используется для решения проблемы.

В этом случае некоторые из них будут проецировать уникальный идентификатор для каждого элемента, например.

Работы, не рекомендуется

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

Но вы все еще будете иметь затяжной X значок удаления позже.

Вам нужно либо иметь URL и значок удаления X как часть того же самого высокого элемента, так что вы можете просто слепо удалите его parent, или какой-либо уникальный идентификатор, который дает X информацию о том, какие URL для удаления, а затем также код X, чтобы удалить себя.

Рекомендуется

Рекомендуемый подход оборачивает каждый URL в неупорядоченном списке (ul). 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 вы добавите. Когда вы идете, чтобы удалить строку, она получает строку из этого атрибута, ищет ее в #screenlist, удаляет ее, а также .remove с самой площадью .delete_icon плюс конечный тег <br>.