CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

How to Replace Or Update div based on its id

I have a div as shown 

<div id="mycontainer">
    <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0">
         <h3>First Item</h3>

    </div>
    <div class="lastItm_Wrap" id="lastwrap644" data-lastwrapquan="0">
         <h3>Second Item</h3>

    </div>
</div>

Could you please let me know how to replace Or add a new One if mycontainer consists of div lastwrap703

I have tried it this way 

   $(document).on('click', '.replaceoradd', function (e) {
    // update existing  lastwrap703 if exists inside mycontainer  or add new 

    var id = "703";

    if ($("#lastwrap" + id).length == 0) {  // doesn't exists
         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer).append(html);
    }

    else {
      $( "#mycontainer.lastwrap703").replaceWith( "<h2>New heading</h2>" );
    }

});

Could you please let me know how to accomplish this

http://jsfiddle.net/673h38g9/28/

Upvotes: 0

Views: 113

Answers (6)

kadam sunil
kadam sunil

Reputation: 243

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>

$(document).ready(function() { 
$( "#replaceoradd" ).click(function() {
alert("asdsads");
   if ($("#lastwrap703").length == 0) {  // doesn't exists
         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    }
	else
	{
	 $( "#lastwrap703").html( "<h2>New heading</h2>" );
	}
});
 
});
</script>

Upvotes: 0

rmorrin
rmorrin

Reputation: 2485

It looks like you've got the basic idea already, however, there are a couple of syntax errors in your code:

  • First, you're missing a closing quote to your #mycontainer selector: $("#mycontainer).append(html); should be $("#mycontainer").append(html);
  • Next, you're attaching your click handler to .replaceoradd, which specifies a class, but replaceoradd is an ID in your example. You should use #replaceoradd.
  • Finally, your selector for replaceWith is slightly off, #mycontainer.lastwrap703 specifies an element with an ID of mycontainer AND a class of lastwrap703. The correct selector for your example is #mycontainer #lastwrap703. Again, lastwrap703 is specified as an ID and is a child of mycontainer.

It's also worth mentioning that .replaceWith() will replace the whole element with the new content. This doesn't seem like what you're trying to achieve. As others have mentioned, .html() will replace the inner html of the matched element only.

Working jsfiddle: http://jsfiddle.net/km6c87m3/

Upvotes: 1

jyrkim
jyrkim

Reputation: 2869

I tested your code and the if part of your code was working fine. I noticed that your click event handler was listening to class .replaceoradd so I had to change it like below. Also, thanks to Milind Anantwar for pointing out the else part code issue; so I changed the else part of your code. Fiddle

$(document).on('click', '#replaceoradd', function (e) {
    // update existing  lastwrap703 if exists inside mycontainer  or add new 

    var id = "703";

    if ($("#lastwrap" + id).length == 0) {  // doesn't exists

         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    }

    else {

      $( "#mycontainer #lastwrap703").html( "<h2>New heading</h2>" );
    }

});

Upvotes: 1

Jes&#250;s Quintana
Jes&#250;s Quintana

Reputation: 1813

You had few errors, you was using .replaceadd instead #replaceadd, your was loooking for #mycontainer.lastwrap703 when was #mycontainer > #lastwrap+id, and you must close the " in $("#mycontainer)

Code modified:

$(document).on('click', '#replaceoradd', function (e) {
    // update existing  lastwrap703 if exists inside mycontainer  or add new 

    var id = "703";

    if ($("#lastwrap" + id).length == 0) {  // doesn't exists
         var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    }

    else {
      $( "#mycontainer > #lastwrap"+id).replaceWith( "<h2>New heading</h2>" );
    }

});

An the JSFiddle fixed: https://jsfiddle.net/fpzeLa0a/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

There are multiple problems

//replaceoradd is the id, so use id selector
$(document).on('click', '#replaceoradd', function (e) {

    var id = "703",
        $el = $("#lastwrap" + id);

    if ($el.length == 0) { // doesn't exists
        var html = ' <div class="lastItm_Wrap" id="lastwrap703" data-lastwrapquan="0"><h3>Second Item</h3></div>';
        $("#mycontainer").append(html);
    } else {
        //use id selector here to find the element 
        $el.html("<h2>New heading</h2>");
    }

});

Demo: Fiddle

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to set the new html in else part. you should use .html() instead of .replaceWith()

 else {
  $( "#mycontainer.lastwrap703").html( "<h2>New heading</h2>" );
}

Upvotes: 1

Related Questions