CODEWITHSUNDEEP
javascripthtml
aparna rai
aparna rai

Reputation: 833

Remove div tag content

How to remove div tag content on click x (using javascript) ?

<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>

Upvotes: 0

Views: 596

Answers (10)

Manvendra Priyadarshi
Manvendra Priyadarshi

Reputation: 255

<!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>

Upvotes: 0

vicky patel
vicky patel

Reputation: 705

//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>

Upvotes: 0

Ashraf Ali
Ashraf Ali

Reputation: 53

$(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>

you can simply use the remove() function of JQuery to do this, let me show you the example below.

<!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();
        });
    });

Upvotes: 0

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

First create onclick event on X and pass the current element into it and then find the parent on the basis of this element call removeChild(). Following is working demo:

<!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>

Upvotes: 1

Rasmus Stougaard
Rasmus Stougaard

Reputation: 433

Check out this fiddle: https://jsfiddle.net/2mcdbs4c/

With the following function:

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

We select the parent element and then removes it.

Then you can just add it as a onclick event on your element

onclick="removeSpan(this)"

Upvotes: 0

mbadeveloper
mbadeveloper

Reputation: 1270

$(".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>

Upvotes: 0

Faraz Babakhel
Faraz Babakhel

Reputation: 664

Try this 

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

Upvotes: 0

skovmand
skovmand

Reputation: 4422

Use a unique id for every element and have a function for setting their display to none. Here's a demo of a complete page with the desired functionality.

    <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>

Upvotes: 0

Nihar Sarkar
Nihar Sarkar

Reputation: 1299

Find the closest "Div" parent and remove that element. Try this code :

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

Upvotes: 0

g8bhawani
g8bhawani

Reputation: 674

Simply we can delete div using jquery for ex-

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

Upvotes: 1

Related Questions