Question

我将在div中放置一个删除按钮，以便用户单击删除按钮，然后div将被删除。但目前有2个问题。

（1）我放置的按钮与div中的文字没有正确对齐

（2）按钮点击事件无效。

请参阅我的HTML

$("#slider").on("change",function(){
       var v=$(this).val();
       $('.text.active').css('font-size', v + 'px');
    });
                     
    $('.text').on('focus',function(){
        $('.close-icon').addClass('active');
    	$('.text').removeClass('active');
    	$(this).addClass('active');
    });
    
    $(".close-icon.active").on("click",function(){
    alert('hiii');
    
    });

.close-icon {
    	border:1px solid transparent;
    	background-color: transparent;
    	display: inline-block;
    	vertical-align: middle;
      outline: 0;
      cursor: pointer;
    }
    .close-icon:after {
    	content: "X";
    	display: block;
    	width: 15px;
    	height: 15px;
    	position: absolute;
    	background-color: #FA9595;
    	z-index:1;
    	right: 35px;
    	top: 0;
    	bottom: 0;
    	margin: auto;
    	padding: 2px;
    	border-radius: 50%;
    	text-align: center;
    	color: white;
    	font-weight: normal;
    	font-size: 12px;
    	box-shadow: 0 0 2px #E50F0F;
    	cursor: pointer;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="12" max="120" id="slider" />
    <div class="text"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></div>
    <div class="text text1"  contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></div>
    <div class="text text2"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></div>
    <div class="text text3"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></div>

请帮助解决这个问题。

Answer 1

您的代码几乎是正确的，只需要很少的更新。

<强> CSS：

使用position

更改float

/*position: absolute;*/
float:right;

<强>脚本：

您的元素是动态的，这就是事件没有约束的原因。试试以下。

$(document).on("click",".close-icon",function(){

$(this).closest('div').remove();
//alert('hiii');

});

这是有效的Fiddle

Answer 2

如果您在页面加载后修改了任何div。这些更改未在DOM中注册。所以你需要将未更改的元素作为父元素。更好的是你可以定位文档或正文标记。

<script>
$(document).on("click",".close-icon",function(){
alert('hiii');    
});

$("body").on("click",".close-icon",function(){
alert('hiii');    
});
</script>

请参阅下面的代码段最终工作代码。

$("#slider").on("change",function(){
       var v=$(this).val();
       $('.text.active').css('font-size', v + 'px');
    });
                     
    $('.text').on('focus',function(){
        $('.close-icon').addClass('active');
    	$('.text').removeClass('active');
    	$(this).addClass('active');
    });
    
    $(document).on("click",".close-icon.active",function(){
    $(this).parent("div").remove();
    
    });

.close-icon {
    	border:1px solid transparent;
    	background-color: transparent;
    	display: inline-block;
    	vertical-align: middle;
      outline: 0;
      cursor: pointer;
    }
    .close-icon:after {
    	content: "X";
    	display: block;
    	width: 15px;
    	height: 15px;
    	position: relative;
    	background-color: #FA9595;
    	z-index:1;
    	left: 100%;
    	top: 0;
    	bottom: 0;
    	margin: auto;
    	padding: 2px;
    	border-radius: 50%;
    	text-align: center;
    	color: white;
    	font-weight: normal;
    	font-size: 12px;
    	box-shadow: 0 0 2px #E50F0F;
    	cursor: pointer;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="12" max="120" id="slider" />
    <div class="text"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></div>
    <div class="text text1"  contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></div>
    <div class="text text2"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></div>
    <div class="text text3"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></div>

Answer 3

如果我说得对，那么这是适合您任务的正确代码

fflush

无需图标的绝对位置

<input type="range" min="12" max="120" id="slider" />
    <div class="text"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></button></div>
    <div class="text text1"  contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></button></div>
    <div class="text text2"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></button></div>
    <div class="text text3"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></button></div>

对我来说，“点击”效果很好 - 我只是将最终代码放入功能

.close-icon {
        border:1px solid transparent;
        background-color: transparent;
        display: inline-block;
        vertical-align: middle;
      outline: 0;
      cursor: pointer;
      position: relative;
    }
    .close-icon:before {
        content: "X";
        display: block;
        width: 15px;
        height: 15px;
        background-color: #FA9595;
        margin: auto;
        padding: 2px;
        border-radius: 50%;
        text-align: center;
        color: white;
        font-weight: normal;
        font-size: 12px;
        box-shadow: 0 0 2px #E50F0F;
        cursor: pointer;
    }

检查它的工作原理：https://jsfiddle.net/6ek8c0eq/

Answer 4

位置absolute元素应该由位置relative元素包裹，否则它将absolute包含在窗口的位置。

使用时应移除按钮的父级以删除整个节点。因此，请使用parent和remove

$("#slider").on("change", function() {
  var v = $(this).val();
  $('.text.active').css('font-size', v + 'px');
});

$('.text').on('focus', function() {
  $('.text').removeClass('active');
  $(this).addClass('active');
});

$(".close-icon").on("click", function() {
 $(this).parent().remove()

});

.close-icon {
  border: 1px solid transparent;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.text{
  position: relative;
  margin: 20px 0;
}
.close-icon:after {
  content: "X";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: #FA9595;
  z-index: 1;
  right: 35px;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 2px;
  border-radius: 50%;
  text-align: center;
  color: white;
  font-weight: normal;
  font-size: 12px;
  box-shadow: 0 0 2px #E50F0F;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="12" max="120" id="slider" />
<div class="text" contenteditable="true" style="cursor:grab;">hello
  <button class="close-icon dbutton" type="reset">
</div>
<div class="text text1" contenteditable="true" style="cursor:grab;">hello
  <button class="close-icon dbutton1" type="reset">
</div>
<div class="text text2" contenteditable="true" style="cursor:grab;">hello
  <button class="close-icon dbutton2" type="reset">
</div>
<div class="text text3" contenteditable="true" style="cursor:grab;">hello
  <button class="close-icon dbutton3" type="reset">
</div>

Click事件在contenteditable div中不起作用

4 个答案: