0

I wonder if it's possible in jQuery/JS:

If “foobar” is removed or gone from the HTML code

<div id="foo">
 <div id="line1">...</div>
 <div id="line2">foobar</div>
</div>

I'd like to automatically add “new”

<div id="foo">
 <div id="line1">...</div>
 <div id="line2">new</div>
</div>

I'd like to have "new" displayed when someone deleted "foobar" from #line2. It's for attribution purposes.

vurquee
  • 473
  • 1
  • 7
  • 20
  • Possible duplicate ... http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom – Chuck Norris Dec 16 '11 at 19:32
  • so how exactly is this div supposed to get removed without your code knowing about it? – Alnitak Dec 16 '11 at 19:52
  • @Alnitak I have a plugin that has attribution within it. If "foobar" is removed from #line2 by the user, I want to automatically add "new". Jasper has provided me a great answer. http://stackoverflow.com/a/8539225/1101391 – vurquee Dec 16 '11 at 20:13
  • @jazzQuery Are you looking to see when the text inside is changed from "foobar", or when the element containing the text "foobar" is removed? Those are two different scenarios. – casperOne Dec 16 '11 at 20:17

2 Answers2

3

If you make the text the value of an input you can bind to it's change event:

<div id="foo">
   <div id="line1">...</div>
   <div id="line2"><input type="text" value="foobar" /></div>
</div>

$('#line2').children('input').on('change', function () {
    var $this = $(this);
    if ($this.val() == '') {
        $this.val('new');
    }
});

Here is a demo: http://jsfiddle.net/u9Twu/

Note that if you want to programatically change the value of the input you have to manually call .trigger('change') on the input after you change it's value for the change event handler to run.

Also note that .on() is new in jQuery 1.7 and in this case is the same as .bind().

UPDATE

var $foo   = $('#foo'),
    $line2 = $foo.children('#line2');

if ($line2.length == 0) {
    //no #line2 element is found
    $foo.append('<div id="line2">new</div>');
} else if ($line2.text().length == '') {
    //#line2 element is empty
    $line2.text('new');
} else if ($line2.text() != 'foobar') {
    //#line2 element does not contain only the string: foobar
    $line2.text('new');
}

Here is a demo: http://jsfiddle.net/u9Twu/1/

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • I just improved my question. Sorry, I wasn't descriptive. It's for widget attribution. I'd like to automatically add a new line of code within #line2 if "foobar" is not found or #line2 is empty. – vurquee Dec 16 '11 at 19:45
  • @jazzQuery: Problem is that unlike the input elements `div` does not support the change event. So probably you will have to manually trigger the change event for the div as suggested in the answer. – Bhesh Gurung Dec 16 '11 at 19:55
  • @Jasper +1 for saving me. Thanks. – vurquee Dec 16 '11 at 19:58
  • 1
    @jazzQuery The **update** to my answer shows how to determine if the `#line2` element exists or is empty. If the `#foo` element is being altered after the DOM loads initially then you will need to fire this code after the `#foo` element is edited to check if it has been edited in an invalid way. – Jasper Dec 16 '11 at 19:58
1
$('#foo').click(function() {
    $('#line2').remove();
    $(this).append('<div id="line3">new foobar</div>');
})

http://jsfiddle.net/y5FDs/

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • This has the somewhat strange behavior of only working once then the `#line3` elements start stacking up. Why change the ID from `line2` to `line3`? Since you are removing the `#line2` element it's OK to re-use the ID. – Jasper Dec 16 '11 at 19:41
  • @Jasper - changing the ID is just for demo purpose, of course one free to use the `#line2` since it's gone – Zoltan Toth Dec 16 '11 at 19:44
  • @Jasper It's kinda close to what I want to happen. But it doesn't need to be clicked. I have this plugin and I want to add "new" in #line2 if it finds "foobar" is deleted from the code. You know, copyright. =) – vurquee Dec 16 '11 at 19:49
  • @ZoltanToth +1 for your effort to answer my question. Thank you. – vurquee Dec 16 '11 at 20:04