Question

如何在点击 x （使用javascript）时删除div标签内容？

<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>

Answer 1

我们可以使用jquery删除div 对于前 -

$("span.clsrng").click(function(){
    $(this).parent("div.clsrng").remove();
})

Answer 2

首先在onclick上创建X事件并将当前元素传递给它，然后在此元素调用removeChild()的基础上找到父元素。以下是工作演示：

<!DOCTYPE html>
<html>
<body>
<div id="rang">
<div class="clsrng">
  <span class="spnrng">one</span>
  <span class="clsrng" onclick="remove(this)">x</span>
</div>
<div class="clsrng">
  <span class="spnrng">two</span>
  <span class="clsrng" onclick="remove(this)">x</span>
</div>
<div class="clsrng">
  <span class="spnrng">three</span>
  <span class="clsrng" onclick="remove(this)">x</span>
</div>
</div>
<script>
var remove = function(data){
	var div = data.parentElement;
	if(div){
    	div.parentElement.removeChild(div);
    }
}
</script>
</body>
</html>

Answer 3

找到最近的“Div”父级并删除该元素。试试这段代码：

$(".clsrng").click(function() {
$(this).closest("div.clsrng").remove();
});

Answer 4

为每个元素使用唯一的id，并具有将其显示设置为无的功能。这是一个包含所需功能的完整页面的演示。

＆＃13;

    <html>
      <head>
        <title>Remove a div demo</title>
      </head>
      <body>
        <script>
          function hideElement(elementId) {
            var element = document.querySelector(elementId);
    
            if (element) {
              element.style.display = "none";
            }
          }
        </script>
    
        <div id="rang">
          <div id="something1" class="clsrng">
            <span class="spnrng">one</span><span class="clsrng" onclick="hideElement('#something1')">x</span>
          </div>
          <div id="something2" class="clsrng">
            <span class="spnrng">two</span><span class="clsrng" onclick="hideElement('#something2')">x</span>
          </div>
          <div id="something3" class="clsrng">
            <span class="spnrng">three</span><span class="clsrng" onclick="hideElement('#something3')">x</span>
          </div>
        </div>
      </body>
    </html>

＆＃13;

Answer 5

试试这个

$("body").on("click",".clsrng",function() {
     $(this).closest("div.clsrng").remove();
});

Answer 6

$(".clsrng").on("click",function(){
    $(this).closest("div").find("span").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>

Answer 7

看看这个小提琴：https://jsfiddle.net/2mcdbs4c/

使用以下功能：

function removeSpan(el){
  var parent = el.parentElement;
  parent.parentElement.removeChild(parent);
}

我们选择父元素，然后将其删除。

然后您可以将其添加为元素上的onclick事件

onclick="removeSpan(this)"

Answer 8

＆＃13;

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            function myFunc(id)
            {
                 var elem = document.getElementById(id);
   		 return elem.parentNode.removeChild(elem);
            }
        </script>
    </head>

    <body>
        <div id="rang">
<div class="clsrng"><span class="spnrng" id="a1" onClick="myFunc(this.id);">one<span class="clsrng">x</span></span></div>
<div class="clsrng" ><span class="spnrng" id="a2" onClick="myFunc(this.id);">two<span class="clsrng">x</span></span></div>
<div class="clsrng" ><span class="spnrng" id="a3" onClick="myFunc(this.id);">three<span class="clsrng">x</span></span></div>
</div>
    </body>
</html>

＆＃13;

Answer 9

$(document).ready(function(){
    $('.clsrng').click(function(){
   			$(this).remove();
	});
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</script>
</head>
<body>
<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>
</body>
</html>

你可以简单地使用JQuery的remove（）函数来执行此操作，让我向您展示下面的示例。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>
</body>
</html>

 $(document).ready(function(){
        $('.clsrng').click(function(){
                $(this).remove();
        });
    });

Answer 10

//using javascript
var a =  document.querySelectorAll("span.clsrng");
for(i of a){
i.addEventListener('click',function(e){
e.currentTarget.parentNode.remove();
})
}

<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>

删除div标记内容

10 个答案: