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>');

现在我想添加一个＆＃34; X＆＃34;为了删除任何链接。

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

  

如何将click事件附加到该span元素，该元素将在创建的每个元素上都是动态的，单击时会删除整行？

有任何线索吗？

Answer 1

  

如何将click事件附加到该span元素，该元素将在创建的每个元素上都是动态的，单击时会删除整行？

问题在于你假设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删除图标。

您需要将URL和X删除图标作为同一更高元素的一部分，以便您可以盲目地删除其parent或一些给出{{1}的唯一标识符有关要删除的网址的信息，然后还会对X进行编码以自行删除。

<强>推荐

推荐的方法将每个URL包装在无序列表中（X）。 ul仅作为示例提供，因为列表项（ul）充当这些类型任务的常用容器。也就是说，如果不需要li，则span或div应该可以正常代替li。

由于ul/li是同一父元素（X）的一部分，因此它可以快速找到它并在不尝试解析文本数据数组的情况下将其删除。

li

虽然这个问题专门询问如何使用jQuery执行此操作，但上述纯JavaScript示例不提供其他代码。如果您愿意，可以随时打包<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> 并致电$(this)等等。

Answer 2

假设你无法在你的网址周围包装标签，这是一个可能的解决方案，我可以通过我自己的存储方法和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范围本身加上尾随{{1}标签。

Answer 3

您可以将附加内容包装在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>