Question

我正在使用<div contenteditable="true">，当我按Enter键输入换行符时，它会生成<div><br></div>。但我只是想从开始和结束时删除它。

例如：

<div contenteditable="true">

<div><br></div>我想删除此

ABC

<div><br></div>仍然

1234

<div><br></div>我想删除此

<div><br></div>我想删除此

</div>

for(var x = item.length - 1 ; x >= 0 ; x--){
   if($(item[x]).html() == "<br>"){
      $(item[x]).remove();
   }else{
      break;
   }
}

for(var x = 0; x <= item.length-1 ; x++){
   if($(item[x]).html() == "<br>"){
      $(item[x]).remove();
   }else{
      break;
   }
}

目前我正在使用两个循环来删除它，但我正在寻找一种更好的方法来过滤它。有人可以指导我吗？

感谢。

Answer 1

如果你想删除一个空的div ..（你的问题说明了......）

这可能会有所帮助.....

$("div:empty").remove();

此代码删除了空的div ...如果那就是你想要的，这可以帮助

Answer 2

您实际上可以使用while循环而不是for循环来实现它。您需要存储first last的{{1}}和contenteditable子项的引用，并使用div循环对其进行操作。关于代码的评论中的详细说明。

while

$('.remove').on('click', function() {
  var firstChild = $('div[contenteditable] div:first');
  var lastChild = $('div[contenteditable] div:last');
  //store the reference for first and last child of the contenteditable div
  while(firstChild.html()=="<br>")//remove all the element's until firstchild's html!="<br>" i.e. is not empty
  {
   firstChild.remove();//remove it
   firstChild= $('div[contenteditable] div:first'); //again store the reference to new first child after remove
  }
  //same goes with last child
  while(lastChild.html()=="<br>")
  {
   lastChild.remove();
   lastChild= $('div[contenteditable] div:last');
  }
})

div[contenteditable] {
  background-color: orange;
}

有效的方法来删除空div

2 个答案: